mirror of
https://github.com/inventree/InvenTree.git
synced 2025-10-15 05:32:21 +00:00
feat(ui/choice field): select old content on click, auto select first row (#10485)
closes #10468, #10470
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import type { ApiFormFieldType } from '@lib/types/Forms';
|
import type { ApiFormFieldType } from '@lib/types/Forms';
|
||||||
import { Select } from '@mantine/core';
|
import { Select } from '@mantine/core';
|
||||||
import { useId } from '@mantine/hooks';
|
import { useId } from '@mantine/hooks';
|
||||||
import { useCallback, useMemo } from 'react';
|
import { useCallback, useMemo, useRef } from 'react';
|
||||||
import type { FieldValues, UseControllerReturn } from 'react-hook-form';
|
import type { FieldValues, UseControllerReturn } from 'react-hook-form';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -17,6 +17,7 @@ export function ChoiceField({
|
|||||||
fieldName: string;
|
fieldName: string;
|
||||||
}>) {
|
}>) {
|
||||||
const fieldId = useId();
|
const fieldId = useId();
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
field,
|
field,
|
||||||
@@ -70,6 +71,8 @@ export function ChoiceField({
|
|||||||
error={definition.error ?? error?.message}
|
error={definition.error ?? error?.message}
|
||||||
radius='sm'
|
radius='sm'
|
||||||
{...field}
|
{...field}
|
||||||
|
ref={inputRef}
|
||||||
|
onDropdownOpen={() => inputRef?.current?.select()}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
data={choices}
|
data={choices}
|
||||||
value={choiceValue}
|
value={choiceValue}
|
||||||
@@ -81,6 +84,7 @@ export function ChoiceField({
|
|||||||
leftSection={definition.icon}
|
leftSection={definition.icon}
|
||||||
comboboxProps={{ withinPortal: true }}
|
comboboxProps={{ withinPortal: true }}
|
||||||
searchable
|
searchable
|
||||||
|
selectFirstOptionOnChange
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user