diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx index e10f70fda4..86b8ef87d6 100644 --- a/src/frontend/src/components/forms/fields/ApiFormField.tsx +++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx @@ -146,7 +146,7 @@ export function ApiFormField({ case 'related field': // Redirect location or category fields to the appropriate tree field if ( - fieldDefinition.api_url == apiUrl(ApiEndpoints.stock_location_list) + fieldDefinition.api_url === apiUrl(ApiEndpoints.stock_location_list) ) { return ( ); } else if ( - fieldDefinition.api_url == apiUrl(ApiEndpoints.category_list) + fieldDefinition.api_url === apiUrl(ApiEndpoints.category_list) ) { return ( ([]); const query = useQuery({ + enabled: + !definition.disabled && + !definition.hidden && + (isDropdownOpen || selectedValue != null), queryKey: [ 'tree-field', fieldName, endpoint, + isDropdownOpen, debouncedSearch, selectedValue ], @@ -73,9 +78,10 @@ export function TreeField({ search: debouncedSearch || undefined, // Include the selected node and its ancestors in the initial response // so the node label is available before the user interacts with the field. - expand_to: - !debouncedSearch && !!selectedValue ? selectedValue : undefined, - max_level: !debouncedSearch && !!selectedValue ? 0 : undefined + max_level: debouncedSearch ? undefined : 0, + expand_to: debouncedSearch + ? undefined + : (selectedValue ?? undefined) } }) .then((res) => res.data ?? []) @@ -162,7 +168,7 @@ export function TreeField({ const onChange = useCallback( (val: string | null) => { - const pk = val ? Number.parseInt(val) : null; + const pk = val ? Number.parseInt(val, 10) : null; field.onChange(pk); definition.onValueChange?.(pk); }, @@ -244,6 +250,7 @@ export function TreeField({ return (