Merge pull request #671 from AnnMarieW/fix-debounce

fix race condition in debounce values

Author: AnnMarieW

CHANGELOG.md

@@ -2,8 +2,13 @@
 
 # [Unreleased]
 
+### Added
 - Added `anchorProps` prop to `Anchor` by @jksinton 
 
+### Fixed
+- Fixed race condition in debounced value updates #671 by @AnnMarieW
+
+
 # 2.4.0
 
 ### Added

src/ts/components/core/combobox/Autocomplete.tsx

@@ -87,7 +87,9 @@ const Autocomplete = ({
     }, [options]);
 
     useDidUpdate(() => {
-        setAutocomplete(value);
+        if (value !== debounced) {
+            setAutocomplete(value);
+        }
     }, [value]);
 
     return (

src/ts/components/core/combobox/MultiSelect.tsx

@@ -114,8 +114,10 @@ const MultiSelect = ({
         setProps({ value: newSelected });
     }, [data]);
 
-    useDidUpdate(() => {
-        setSelected(value ?? []);
+   useDidUpdate(() => {
+        if (value !== debounced) {
+            setSelected(value ?? []);
+        }
     }, [value]);
 
     const handleSearchChange = (newSearchVal) => {

src/ts/components/core/combobox/Select.tsx

@@ -58,7 +58,7 @@ const Select = ({
     debounce = false,
     n_submit = 0,
     n_blur = 0,
-    data = [],
+    data,
     searchValue,
     value,
     clearSearchOnFocus = false,
@@ -106,7 +106,9 @@ const Select = ({
     }, [data]);
 
     useDidUpdate(() => {
-        setSelected(value);
+        if (value !== debounced) {
+            setSelected(value);
+        }
     }, [value]);
 
     useDidUpdate(() => {

src/ts/components/core/input/JsonInput.tsx

@@ -46,7 +46,9 @@ const JsonInput = ({
     }, [debounced]);
 
     useDidUpdate(() => {
-        setVal(value);
+        if (value !== debounced) {
+            setVal(value);
+        }
     }, [value]);
 
     const handleKeyDown = (ev) => {

src/ts/components/core/input/NumberInput.tsx

@@ -92,7 +92,9 @@ const NumberInput = ({
     }, [debounced]);
 
     useDidUpdate(() => {
-        setVal(value);
+        if (value !== debounced) {
+            setVal(value);
+        }
     }, [value]);
 
     const handleKeyDown = (ev) => {

src/ts/components/core/input/PasswordInput.tsx

@@ -50,7 +50,9 @@ const PasswordInput = ({
     }, [debounced]);
 
     useDidUpdate(() => {
-        setVal(value);
+        if (value !== debounced) {
+            setVal(value);
+        }
     }, [value]);
 
     const handleKeyDown = (ev) => {

src/ts/components/core/input/TextInput.tsx

@@ -49,7 +49,9 @@ const TextInput = ({
     }, [debounced]);
 
     useDidUpdate(() => {
-        setVal(value);
+        if (value !== debounced) {
+            setVal(value);
+        }
     }, [value]);
 
     const handleKeyDown = (ev) => {

src/ts/components/core/input/Textarea.tsx

@@ -44,7 +44,9 @@ const Textarea = ({
     }, [debounced]);
 
     useDidUpdate(() => {
-        setVal(value);
+        if (value !== debounced) {
+            setVal(value);
+        }
     }, [value]);
 
     const handleKeyDown = (ev) => {

src/ts/components/dates/DateInput.tsx

@@ -95,7 +95,9 @@ const DateInput = ({
     }, [debounced]);
 
     useDidUpdate(() => {
-        setDate(value);
+        if (value !== debounced) {
+            setDate(value);
+        }
     }, [value]);
 
     const handleKeyDown = (ev) => {