mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
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:
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
|
||||
|
||||
Reference in new issue
Block a user