diff --git a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx index 1c10369aae1..7c685c437fd 100644 --- a/packages/ui-patterns/src/FilterBar/FilterCondition.tsx +++ b/packages/ui-patterns/src/FilterBar/FilterCondition.tsx @@ -58,19 +58,25 @@ export function FilterCondition({ const [showValueCustom, setShowValueCustom] = useState(false) const [hasTypedOperator, setHasTypedOperator] = useState(false) const [hasTypedValue, setHasTypedValue] = useState(false) + const [localValue, setLocalValue] = useState((condition.value ?? '').toString()) + + const conditionValue = (condition.value ?? '').toString() // Reset "has typed" state when focus changes useEffect(() => { - if (!isOperatorActive) { - setHasTypedOperator(false) - } - }, [isOperatorActive, setHasTypedOperator]) + if (!isOperatorActive) setHasTypedOperator(false) + }, [isOperatorActive]) useEffect(() => { - if (!isActive) { - setHasTypedValue(false) + if (!isActive) setHasTypedValue(false) + }, [isActive]) + + // Sync local value with condition.value when it changes externally (e.g., dropdown selection) + useEffect(() => { + if (localValue !== conditionValue) { + setLocalValue(conditionValue) } - }, [isActive, setHasTypedValue]) + }, [conditionValue]) useEffect(() => { if (isActive && valueRef.current) { @@ -108,7 +114,7 @@ export function FilterCondition({ filterProperties, propertyOptionsCache, loadingOptions, - (condition.value ?? '').toString(), + conditionValue, hasTypedValue ), [ @@ -117,7 +123,7 @@ export function FilterCondition({ filterProperties, propertyOptionsCache, loadingOptions, - condition.value, + conditionValue, hasTypedValue, ] ) @@ -196,6 +202,7 @@ export function FilterCondition({ const onValueChange = useCallback( (e: React.ChangeEvent) => { setHasTypedValue(true) + setLocalValue(e.target.value) handleInputChange(path, e.target.value) }, [handleInputChange, path] @@ -270,7 +277,7 @@ export function FilterCondition({ handleInputFocus(path)} onBlur={handleValueBlur} @@ -279,9 +286,7 @@ export function FilterCondition({ disabled={isLoading} aria-label={`Value for ${property.label}`} /> - - {(condition.value ?? '').toString() || ' '} - + {localValue || ' '}