From 2cb5befaa377a42b6d6ca152b98105b59054f2f4 Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Thu, 12 Feb 2026 09:22:04 -0700
Subject: [PATCH] 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 -->
---
 .../src/FilterBar/FilterCondition.tsx         | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

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<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