markus/finances
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages 1 Wiki Activity Actions

N-FIN-67: refactor system to focus next form node

Browse source 
Also added some documentation of the custom auto-complete input
This commit is contained in:
Markus Thielker 2024-12-25 17:42:31 +01:00
parent fc0a9abc7b
commit 803bfc5807
No known key found for this signature in database
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/form/paymentForm.tsx
View file

@ -67,9 +67,8 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
};
}) ?? [];
const payeeRef = useRef<HTMLInputElement>(null);
const categoryRef = useRef<HTMLInputElement>(null);
const noteRef = useRef<HTMLInputElement>(null);
const payeeRef = useRef<HTMLInputElement>({} as HTMLInputElement);
const categoryRef = useRef<HTMLInputElement>({} as HTMLInputElement);
return (
<Form {...form}>
@ -147,8 +146,11 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
<AutoCompleteInput
placeholder="Select payor"
items={entitiesMapped}
next={payeeRef}
{...field} />
{...field}
onChange={(e) => {
field.onChange(e);
payeeRef && payeeRef.current.focus();
}}/>
</FormControl>
<FormMessage/>
</FormItem>
@ -165,15 +167,18 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
<AutoCompleteInput
placeholder="Select payee"
items={entitiesMapped}
next={categoryRef}
{...field}
onChange={(e) => {
field.onChange(e);
if (e && e.target.value) {
const entity = entities.find((entity) => entity.id === Number(e.target.value));
console.log(entity?.defaultCategoryId);
// only focus category input if payee has no default category
if (entity?.defaultCategoryId !== null) {
form.setValue('categoryId', entity?.defaultCategoryId);
setTimeout(() => categoryRef.current.blur(), 0);
} else {
categoryRef && categoryRef.current.focus();
}
}
}}/>
@ -193,7 +198,6 @@ export default function PaymentForm({value, entities, categories, onSubmit, clas
<AutoCompleteInput
placeholder="Select category"
items={categoriesMapped}
next={noteRef}
{...field} />
</FormControl>
<FormMessage/>

14
src/components/ui/auto-complete-input.tsx
View file

@ -9,7 +9,6 @@ import { Button } from '@/components/ui/button';
export interface AutoCompleteInputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
items: { label: string, value: any }[];
next?: React.RefObject<HTMLInputElement>;
}
const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputProps>(
@ -32,7 +31,6 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
props.onChange?.(undefined as any);
const value = e.target.value;
setFilteredItems(props?.items?.filter((item) => {
@ -41,19 +39,26 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
setValue(value);
setOpen(value.length > 0);
// on typing only the internal state is changed while the form state is
// set to undefined. This way only the predefined items are actual values
// for the form validation
props.onChange?.(undefined as any);
}
// since typing changes the internal values and therefor the selected value, this effect
// handles every filteredItems change to check if only one item is left
useEffect(() => {
// only one item is left and the last character was a letter or digit.
// the last condition has to be checked to make it possible to use the backspace
if (filteredItems.length === 1 && /^[a-zA-Z0-9]$/.test(lastKey)) {
setValue(filteredItems[0].label);
setOpen(false);
props.onChange?.({target: {value: filteredItems[0].value}} as any);
props.next && props.next.current?.focus();
}
}, [filteredItems]);
useEffect(() => {
console.log('Prop value changed', value, props.value);
if (props.value) {
setValue(getNameOfPropValue());
} else {
@ -105,7 +110,6 @@ const AutoCompleteInput = React.forwardRef<HTMLInputElement, AutoCompleteInputPr
className="px-3 py-3 hover:bg-accent hover:text-accent-foreground cursor-pointer text-sm font-medium"
onClick={() => {
props.onChange?.({target: {value: item.value}} as any);
props.next && props.next.current?.focus();
setValue(item.label);
setOpen(false);
}}