Support debouncing value when using 'defaultValue' (#939)

draftbit · Aug 22, 2024 · 67382c1 · 67382c1
1 parent 60a4073
commit 67382c1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/core/src/components/NumberInput.tsx b/packages/core/src/components/NumberInput.tsx
@@ -30,7 +30,8 @@ const NumberInput = React.forwardRef<NativeTextInput, Props>(
     const [currentStringNumberValue, setCurrentStringNumberValue] =
       useState("");
 
-    const delayedValue = useDebounce(value, changeTextDelay);
+    const [valueToDebounce, setValueToDebounce] = React.useState(value);
+    const delayedValue = useDebounce(valueToDebounce, changeTextDelay);
 
     const formatValueToStringNumber = (valueToFormat?: number | string) => {
       if (valueToFormat != null) {
@@ -92,7 +93,10 @@ const NumberInput = React.forwardRef<NativeTextInput, Props>(
         ref={ref}
         keyboardType="numeric"
         value={currentStringNumberValue}
-        onChangeText={handleChangeText}
+        onChangeText={(newValue) => {
+          handleChangeText(newValue);
+          setValueToDebounce(newValue);
+        }}
         {...props}
       />
     );

diff --git a/packages/core/src/components/TextInput.tsx b/packages/core/src/components/TextInput.tsx
@@ -24,12 +24,14 @@ const TextInput = React.forwardRef<NativeTextInput, TextInputProps>(
       disabled = false,
       editable = true,
       value,
+      onChangeText,
       ...rest
     },
     ref
   ) => {
     const theme = useTheme();
-    const delayedValue = useDebounce(value, changeTextDelay);
+    const [valueToDebounce, setValueToDebounce] = React.useState(value);
+    const delayedValue = useDebounce(valueToDebounce, changeTextDelay);
 
     useOnUpdate(() => {
       if (delayedValue !== undefined) {
@@ -49,6 +51,10 @@ const TextInput = React.forwardRef<NativeTextInput, TextInputProps>(
           { color: theme.colors.text.strong },
           style,
         ]}
+        onChangeText={(newValue) => {
+          onChangeText?.(newValue);
+          setValueToDebounce(newValue);
+        }}
         {...rest}
       />
     );