Do not accept incoming props for input value during debounce periods

Author: KoolADE85

components/dash-core-components/src/components/Input.react.js

@@ -33,6 +33,10 @@ export default class Input extends PureComponent {
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         const {value} = this.input.current;
+        if (this.state?.pendingEvent && nextProps.value !== value) {
+            // avoid updating the input while awaiting a debounced event
+            return;
+        }
         const valueAsNumber = convert(value);
         this.setInputValue(
             isNil(valueAsNumber) ? value : valueAsNumber,
@@ -124,18 +128,17 @@ export default class Input extends PureComponent {
         }
     }
 
-    debounceEvent() {
+    debounceEvent(time = 0.5) {
         const {value} = this.input.current;
-        let {debounce} = this.props;
-        debounce = Number.isFinite(debounce) ? debounce * 1000 : 500;
+        const MILLISECONDS = 1000;
+        time = time * MILLISECONDS;
 
         window.clearTimeout(this.state?.pendingEvent);
         const pendingEvent = window.setTimeout(() => {
             this.onEvent();
-        }, debounce);
+        }, time);
 
         this.setState({
-            ...this.state,
             value,
             pendingEvent,
         });
@@ -158,29 +161,23 @@ export default class Input extends PureComponent {
             });
             this.input.current.checkValidity();
         }
-        return this.props.debounce === true && e.key === 'Enter' && this.onEvent();
+        return (
+            this.props.debounce === true && e.key === 'Enter' && this.onEvent()
+        );
     }
 
     onChange() {
-        if (this.props.debounce) {
-            if (this.props.type !== 'number') {
-                // this.setState({value: this.input.current.value});
+        const {debounce} = this.props;
+        if (debounce) {
+            if (Number.isFinite(debounce)) {
+                this.debounceEvent(debounce);
             }
-            if (typeof this.props.debounce === 'number') {
-                this.debounceEvent();
+            if (this.props.type !== 'number') {
+                this.setState({value: this.input.current.value});
             }
         } else {
             this.onEvent();
         }
-
-
-        // if (!this.props.debounce) {
-        //     this.onEvent();
-        // } else if (this.props.type !== 'number') {
-        //     this.setState({value: this.input.current.value});
-        // } else if (typeof this.props.debounce === 'number') {
-        //     this.debounceEvent();
-        // }
     }
 }
 
@@ -221,8 +218,8 @@ Input.propTypes = {
     /**
      * If true, changes to input will be sent back to the Dash server only on enter or when losing focus.
      * If it's false, it will send the value back on every change.
-     * If a number, it will wait for the user to stop changing the input for that number of seconds before
-     * sending the value back
+     * If a number, it will not send anything back to the Dash server until the user has stopped
+     * typing for that number of seconds.
      */
     debounce: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 

components/dash-core-components/tests/integration/input/conftest.py

@@ -58,6 +58,7 @@ def range_out(val):
 
     yield app
 
+
 @pytest.fixture(scope="module")
 def debounce_text_app():
     app = Dash(__name__)
@@ -69,7 +70,6 @@ def debounce_text_app():
                 placeholder="long wait",
             ),
             html.Div(id="div-slow"),
-
             dcc.Input(
                 id="input-fast",
                 debounce=0.25,
@@ -88,6 +88,7 @@ def render(slow_val, fast_val):
 
     yield app
 
+
 @pytest.fixture(scope="module")
 def debounce_number_app():
     app = Dash(__name__)
@@ -100,7 +101,6 @@ def debounce_number_app():
                 placeholder="long wait",
             ),
             html.Div(id="div-slow"),
-
             dcc.Input(
                 id="input-fast",
                 debounce=0.25,

components/dash-core-components/tests/integration/input/test_debounce.py

@@ -3,12 +3,13 @@
 from selenium.webdriver.common.by import By
 import pytest
 
+
 def test_debounce_text_by_time(dash_dcc, debounce_text_app):
     dash_dcc.start_server(debounce_text_app)
 
     # expect that a long debounce does not call back in a short amount of time
     elem = dash_dcc.find_element("#input-slow")
-    elem.send_keys('unit test slow')
+    elem.send_keys("unit test slow")
     with pytest.raises(TimeoutException):
         WebDriverWait(dash_dcc.driver, timeout=1).until(
             lambda d: d.find_element(By.XPATH, "//*[text()='unit test slow']")
@@ -19,10 +20,9 @@ def test_debounce_text_by_time(dash_dcc, debounce_text_app):
         "#div-slow", "unit test slow"
     ), "long debounce is eventually called back"
 
-
     # expect that a short debounce calls back within a short amount of time
     elem = dash_dcc.find_element("#input-fast")
-    elem.send_keys('unit test fast')
+    elem.send_keys("unit test fast")
     WebDriverWait(dash_dcc.driver, timeout=1).until(
         lambda d: d.find_element(By.XPATH, "//*[text()='unit test fast']")
     )
@@ -35,7 +35,7 @@ def test_debounce_number_by_time(dash_dcc, debounce_number_app):
 
     # expect that a long debounce does not call back in a short amount of time
     elem = dash_dcc.find_element("#input-slow")
-    elem.send_keys('12345')
+    elem.send_keys("12345")
     with pytest.raises(TimeoutException):
         WebDriverWait(dash_dcc.driver, timeout=1).until(
             lambda d: d.find_element(By.XPATH, "//*[text()='12345']")
@@ -46,10 +46,9 @@ def test_debounce_number_by_time(dash_dcc, debounce_number_app):
         "#div-slow", "12345"
     ), "long debounce is eventually called back"
 
-
     # expect that a short debounce calls back within a short amount of time
     elem = dash_dcc.find_element("#input-fast")
-    elem.send_keys('67890')
+    elem.send_keys("67890")
     WebDriverWait(dash_dcc.driver, timeout=1).until(
         lambda d: d.find_element(By.XPATH, "//*[text()='67890']")
     )

tests/integration/devtools/test_props_check.py

@@ -7,7 +7,7 @@
         "fail": True,
         "name": 'simple "not a boolean" check',
         "component": dcc.Input,
-        "props": {"debounce": 0},
+        "props": {"multiple": 0},
     },
     "missing-required-nested-prop": {
         "fail": True,