fix(www): make DebounceInput value externally controlled (#9292)

* fix(www): make DebounceInput value externally controlled * remove unused parameters from DebounceInput
gatsbyjs · Oct 27, 2018 · 24b5dc0 · 24b5dc0
1 parent 004c875
commit 24b5dc0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/www/src/components/debounce-input.js b/www/src/components/debounce-input.js
@@ -5,35 +5,52 @@ import PropTypes from "prop-types"
 class DebounceInput extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    initialValue: PropTypes.string,
+    value: PropTypes.string,
     delay: PropTypes.number,
   }
 
   static defaultProps = {
-    initialValue: "",
+    value: ``,
     delay: 500,
   }
 
   state = {
-    value: this.props.initialValue,
+    inputValue: ``,
   }
 
-  onChangeText = e => {
-    this.setState({ value: e.target.value })
+  componentDidMount() {
+    this.setInputValue(this.props.value)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value != this.props.value)
+      this.setInputValue(this.props.value)
+  }
+
+  setInputValue = (value = ``) => {
+    this.setState({ inputValue: value })
+  }
+
+  onChangeInputText = e => {
+    this.setInputValue(e.target.value)
     e.persist()
-    this.debounceOnChange(e)
+    this.debounceOnChange()
+  }
+
+  onChangeValue = () => {
+    this.props.onChange(this.state.inputValue)
   }
 
-  debounceOnChange = debounce(this.props.onChange, this.props.delay)
+  debounceOnChange = debounce(this.onChangeValue, this.props.delay)
 
   render() {
-    const { value } = this.state
+    const { inputValue } = this.state
     return (
       <input
         {...this.props}
         type="text"
-        value={value}
-        onChange={this.onChangeText}
+        value={inputValue}
+        onChange={this.onChangeInputText}
       />
     )
   }

diff --git a/www/src/views/starter-library/filtered-starters.js b/www/src/views/starter-library/filtered-starters.js
@@ -46,7 +46,7 @@ export default class FilteredStarterLibrary extends Component {
       sitesToShow: showAll ? showAll : this.state.sitesToShow + 15,
     })
   }
-  onChangeUrlWithText = e => this.props.setURLState({ s: e.target.value })
+  onChangeUrlWithText = value => this.props.setURLState({ s: value })
 
   render() {
     const { data, urlState, setURLState } = this.props
@@ -207,7 +207,7 @@ export default class FilteredStarterLibrary extends Component {
                       }`,
                     },
                   }}
-                  initialValue={urlState.s}
+                  value={urlState.s}
                   onChange={this.onChangeUrlWithText}
                   placeholder="Search starters"
                   aria-label="Search starters"