2
0
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:
Hamza Ali
2025-10-05 03:43:17 -04:00
committed by GitHub
parent 65c8af427f
commit 4635ea9443

View File

@@ -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
/> />
); );
} }