fix: updated text jumping for value (#42743)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix: when editing the value on the filter, going to the middle and
changing something forces you back and the end. Very annoying

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved filter condition state management to ensure filter values
remain consistent and responsive during user interactions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Ali Waseem authored and GitHub committed 2026-02-12 09:22:04 -07:00
1 parent 765f95ce9f
commit 2cb5befaa3
1 file changed
+19 -14
@@ -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<HTMLInputElement>) => {
setHasTypedValue(true)
setLocalValue(e.target.value)
handleInputChange(path, e.target.value)
},
[handleInputChange, path]
@@ -270,7 +277,7 @@ export function FilterCondition({
<Input_Shadcn_
ref={valueRef}
type="text"
value={(condition.value ?? '').toString()}
value={localValue}
onChange={onValueChange}
onFocus={() => handleInputFocus(path)}
onBlur={handleValueBlur}
@@ -279,9 +286,7 @@ export function FilterCondition({
disabled={isLoading}
aria-label={`Value for ${property.label}`}
/>
<span className="invisible whitespace-pre text-xs block px-1">
{(condition.value ?? '').toString() || ' '}
</span>
<span className="invisible whitespace-pre text-xs block px-1">{localValue || ' '}</span>
</div>
</PopoverAnchor_Shadcn_>
<PopoverContent_Shadcn_
@@ -310,7 +315,7 @@ export function FilterCondition({
setShowValueCustom(false)
onRemove()
},
search: (condition.value ?? '').toString(),
search: conditionValue,
})
) : (
<DefaultCommandList