Allow parent components to reset SearchBar's query

A SearchBar is responsible for its own internal state and rendering once
it's mounted.

This change allows a parent component to force SearchBar to update its
internal state (the value of query) to a new value.

Author: matijs

src/components/search_bar/__tests__/__snapshots__/search_bar.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`search_bar.tsx snapshot and instance 1`] = `
   emitDelay={0}
   onChange={[MockFunction]}
   placeholder="For example…"
+  query=""
 >
   <div
     className="search-bar"

src/components/search_bar/search_bar.tsx

@@ -18,6 +18,7 @@ interface SearchBarState {
 class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     static defaultProps = {
         emitDelay: 0,
+        query: '',
     }
 
     debouncedEmit = (({ onChange, emitDelay }) => debounce(
@@ -26,7 +27,7 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
 
     constructor(props: Readonly<SearchBarProps>) {
         super(props);
-        const { query = '' } = props;
+        const { query } = props;
         this.state = {
             query,
         };
@@ -40,18 +41,27 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
         }
     }
 
+    componentDidUpdate(prevProps: SearchBarProps, prevState: SearchBarState) {
+        const { query } = this.props;
+        if (query !== prevProps.query && query !== prevState.query) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+                query,
+            });
+        }
+    }
+
     componentWillUnmount() {
         this.debouncedEmit.cancel();
     }
 
     onChange(event: React.ChangeEvent<HTMLInputElement>) {
         const { value: query } = event.target;
-
         this.setState({
             query,
+        }, () => {
+            this.debouncedEmit(query);
         });
-        event.persist();
-        this.debouncedEmit(query);
     }
 
     render() {