Numeric debounce for Input and Textarea (#1056)

* Implement numeric debounce

* Add tests

* Use onKeyUp in Textarea

* Update debounce prop of Textarea + tests

* Compare to true

Author: tcbegley

src/components/input/Input.js

@@ -49,6 +49,7 @@ const Input = props => {
     ...otherProps
   } = props;
   const inputRef = useRef(null);
+  const debounceRef = useRef(null);
 
   const formControlClass = plaintext
     ? 'form-control-plaintext'
@@ -63,7 +64,12 @@ const Input = props => {
   );
 
   const onChange = () => {
-    if (!debounce) {
+    if (debounce) {
+      if (Number.isFinite(debounce)) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(onEvent, debounce);
+      }
+    } else {
       onEvent();
     }
   };
@@ -114,21 +120,23 @@ const Input = props => {
         n_blur: n_blur + 1,
         n_blur_timestamp: Date.now()
       };
-      if (debounce) {
+      if (debounce === true) {
+        // numeric debounce here has no effect, we only care about boolean debounce
         onEvent(payload);
       } else {
         setProps(payload);
       }
     }
   };
 
-  const onKeyPress = e => {
+  const onKeyUp = e => {
     if (setProps && e.key === 'Enter') {
       const payload = {
         n_submit: n_submit + 1,
         n_submit_timestamp: Date.now()
       };
-      if (debounce) {
+      if (debounce === true) {
+        // numeric debounce here has no effect, we only care about boolean debounce
         onEvent(payload);
       } else {
         setProps(payload);
@@ -143,7 +151,7 @@ const Input = props => {
       className={classes}
       onChange={onChange}
       onBlur={onBlur}
-      onKeyPress={onKeyPress}
+      onKeyUp={onKeyUp}
       {...omit(
         [
           'n_blur_timestamp',
@@ -593,10 +601,12 @@ Input.propTypes = {
   /**
    * If true, changes to input will be sent back to the Dash server
    * only when the enter key is pressed or when the component loses
-   * focus.  If it's false, it will sent the value back on every
-   * change.
+   * focus. If it's false, it will sent the value back on every
+   * change. If debounce is a number, the value will be sent to the
+   * server only after the user has stopped typing for that number
+   * of milliseconds.
    */
-  debounce: PropTypes.bool,
+  debounce: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 
   /**
    * Object that holds the loading state object coming from dash-renderer

src/components/input/Textarea.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import classNames from 'classnames';
@@ -43,6 +43,7 @@ const Textarea = props => {
     ...otherProps
   } = props;
   const [valueState, setValueState] = useState(value || '');
+  const debounceRef = useRef(null);
 
   useEffect(() => {
     if (value !== valueState) {
@@ -53,7 +54,15 @@ const Textarea = props => {
   const onChange = e => {
     const newValue = e.target.value;
     setValueState(newValue);
-    if (!debounce && setProps) {
+    if (debounce) {
+      if (Number.isFinite(debounce)) {
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(
+          () => setProps({value: newValue}),
+          debounce
+        );
+      }
+    } else {
       setProps({value: newValue});
     }
   };
@@ -64,21 +73,21 @@ const Textarea = props => {
         n_blur: n_blur + 1,
         n_blur_timestamp: Date.now()
       };
-      if (debounce) {
+      if (debounce === true) {
         payload.value = e.target.value;
       }
       setProps(payload);
     }
   };
 
-  const onKeyPress = e => {
+  const onKeyUp = e => {
     if (submit_on_enter && setProps && e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault(); // don't create newline if submitting
       const payload = {
         n_submit: n_submit + 1,
         n_submit_timestamp: Date.now()
       };
-      if (debounce) {
+      if (debounce === true) {
         payload.value = e.target.value;
       }
       setProps(payload);
@@ -108,7 +117,7 @@ const Textarea = props => {
       className={classes}
       onChange={onChange}
       onBlur={onBlur}
-      onKeyPress={onKeyPress}
+      onKeyUp={onKeyUp}
       onClick={onClick}
       autoFocus={autofocus || autoFocus}
       maxLength={maxlength || maxLength}
@@ -435,8 +444,10 @@ Textarea.propTypes = {
   n_clicks_timestamp: PropTypes.number,
 
   /**
-   * 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 sent the value back on every change.
+   * 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 sent the value back on every change.
+   * If debounce is a number, the value will be sent to the server only after the user
+   * has stopped typing for that number of milliseconds
    */
   debounce: PropTypes.bool,
 

src/components/input/__tests__/Input.test.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render, fireEvent} from '@testing-library/react';
+import {act, render, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Input from '../Input';
 
@@ -127,7 +127,7 @@ describe('Input', () => {
 
     test('tracks submit with "n_submit" and "n_submit_timestamp"', () => {
       const before = Date.now();
-      fireEvent.keyPress(inputElement, {key: 'Enter', code: 13, charCode: 13});
+      fireEvent.keyUp(inputElement, {key: 'Enter', code: 13, charCode: 13});
       const after = Date.now();
 
       expect(mockSetProps.mock.calls).toHaveLength(1);
@@ -156,10 +156,10 @@ describe('Input', () => {
 
     test("don't call setProps on change if debounce is true", () => {
       fireEvent.change(inputElement, {
-        target: {value: 'some-input-value'}
+        target: {value: 'some-new-input-value'}
       });
       expect(mockSetProps.mock.calls).toHaveLength(0);
-      expect(inputElement).toHaveValue('some-input-value');
+      expect(inputElement).toHaveValue('some-new-input-value');
     });
 
     test('dispatch value on blur if debounce is true', () => {
@@ -178,7 +178,7 @@ describe('Input', () => {
 
     test('dispatch value on submit if debounce is true', () => {
       const before = Date.now();
-      fireEvent.keyPress(inputElement, {
+      fireEvent.keyUp(inputElement, {
         key: 'Enter',
         code: 13,
         charCode: 13
@@ -195,6 +195,31 @@ describe('Input', () => {
     });
   });
 
+  describe('numeric debounce', () => {
+    let inputElement, mockSetProps;
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      mockSetProps = jest.fn();
+      const {container} = render(
+        <Input setProps={mockSetProps} value="" debounce={2000} />
+      );
+      inputElement = container.firstChild;
+    });
+
+    test('call setProps after delay if debounce is number', () => {
+      fireEvent.change(inputElement, {
+        target: {value: 'some-input-value'}
+      });
+      expect(mockSetProps.mock.calls).toHaveLength(0);
+      expect(inputElement).toHaveValue('some-input-value');
+      act(() => jest.advanceTimersByTime(1000));
+      expect(mockSetProps.mock.calls).toHaveLength(0);
+      act(() => jest.advanceTimersByTime(1000));
+      expect(mockSetProps.mock.calls).toHaveLength(1);
+    });
+  });
+
   describe('number input', () => {
     let inputElement, mockSetProps;
 

src/components/input/__tests__/Textarea.test.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import {render, fireEvent} from '@testing-library/react';
+import {act, render, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Textarea from '../Textarea';
 
@@ -132,7 +132,7 @@ describe('Textarea', () => {
 
     test('tracks submit with "n_submit" and "n_submit_timestamp"', () => {
       const before = Date.now();
-      fireEvent.keyPress(textarea, {
+      fireEvent.keyUp(textarea, {
         key: 'Enter',
         code: 13,
         charCode: 13
@@ -148,7 +148,7 @@ describe('Textarea', () => {
     });
 
     test("don't increment n_submit if key is not Enter", () => {
-      fireEvent.keyPress(textarea, {key: 'a', code: 65, charCode: 65});
+      fireEvent.keyUp(textarea, {key: 'a', code: 65, charCode: 65});
       expect(mockSetProps.mock.calls).toHaveLength(0);
     });
 
@@ -157,7 +157,7 @@ describe('Textarea', () => {
       const {
         container: {firstChild: ta}
       } = render(<Textarea submit_on_enter={false} setProps={mockSetProps} />);
-      fireEvent.keyPress(ta, {key: 'Enter', code: 13, charCode: 13});
+      fireEvent.keyUp(ta, {key: 'Enter', code: 13, charCode: 13});
       expect(mockSetProps.mock.calls).toHaveLength(0);
     });
 
@@ -206,7 +206,7 @@ describe('Textarea', () => {
         expect(n_submit).toEqual(1);
         expect(n_submit_timestamp).toBeGreaterThanOrEqual(before);
         expect(n_submit_timestamp).toBeLessThanOrEqual(after);
-        expect(value).toEqual('some text');
+        expect(value).toEqual('some text\n');
       });
 
       test('submit not dispatched if shift+enter pressed', () => {
@@ -218,5 +218,30 @@ describe('Textarea', () => {
         expect(mockSetProps.mock.calls).toHaveLength(1);
       });
     });
+
+    describe('numeric debounce', () => {
+      let textarea, mockSetProps;
+
+      beforeEach(() => {
+        jest.useFakeTimers();
+        mockSetProps = jest.fn();
+        const {container} = render(
+          <Textarea setProps={mockSetProps} value="" debounce={2000} />
+        );
+        textarea = container.firstChild;
+      });
+
+      test('call setProps after delay if debounce is number', () => {
+        fireEvent.change(textarea, {
+          target: {value: 'some-input-value'}
+        });
+        expect(mockSetProps.mock.calls).toHaveLength(0);
+        expect(textarea).toHaveValue('some-input-value');
+        act(() => jest.advanceTimersByTime(1000));
+        expect(mockSetProps.mock.calls).toHaveLength(0);
+        act(() => jest.advanceTimersByTime(1000));
+        expect(mockSetProps.mock.calls).toHaveLength(1);
+      });
+    });
   });
 });