Proper syncing of search result input

annotorious · Jun 23, 2022 · 0a47519 · 0a47519
1 parent c65a22c
commit 0a47519
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/src/GeoTaggingWidget.jsx b/src/GeoTaggingWidget.jsx
@@ -79,8 +79,6 @@ const GeoTaggingWidget = props => {
     setAdvancedEditing(false);
 
   const onSearch = ({ search, result }) => {
-    setSearch(search);
-
     if (result) {
       const updated = {
         ...toBody(result),
@@ -111,6 +109,7 @@ const GeoTaggingWidget = props => {
         onShowMinimap={() => setShowMinimap(true)}
         onDeleteGeoTag={onDelete} 
         onSearch={onSearch} 
+        onChangeSearch={setSearch}
         onCollapseToCentroid={onCollapseToCentroid}
         onGoAdvanced={() => setAdvancedEditing(true)} />
 
@@ -127,6 +126,7 @@ const GeoTaggingWidget = props => {
           config={props.config}
           search={search}
           feature={body}
+          onChangeSearch={setSearch}
           onOk={onAdvacedEditingDone}
           onCancel={onAdvacedEditingCanceled} />
       }

diff --git a/src/advanced/AdvancedModal.jsx b/src/advanced/AdvancedModal.jsx
@@ -94,7 +94,7 @@ const AdvancedModal = props => {
     });
   }
 
-  const onSearch = result => {
+  const onSearch = ({ result }) => {
     clearMap();
 
     const { uri, geometry } = result;
@@ -122,6 +122,7 @@ const AdvancedModal = props => {
           <SearchInput 
             config={props.config}
             value={props.search}
+            onChange={props.onChangeSearch}
             onSearch={onSearch} />
 
           <div className="r6o-geotagging-advanced-modal-header-buttons">

diff --git a/src/search/SearchInput.jsx b/src/search/SearchInput.jsx
@@ -37,6 +37,12 @@ const SearchInput = props => {
     // If there's an initial search, run query
     if (search && props.initialSearch) query();
   }, []);
+
+  const onChange = evt => {
+    const { value } = evt.target;
+    setSearch(value);
+    props.onChange(value);
+  }
 
   const onKeyDown = evt => {
     if (evt.key === 'Enter')
@@ -52,7 +58,7 @@ const SearchInput = props => {
       <input 
         placeholder="Search for a place..."
         value={search}
-        onChange={evt => setSearch(evt.target.value)}
+        onChange={onChange}
         onKeyDown={onKeyDown}/>
 
       {loading &&

diff --git a/src/toolbar/WhenExpanded.jsx b/src/toolbar/WhenExpanded.jsx
@@ -27,6 +27,7 @@ const WhenExpanded = props => {
           initialSearch
           config={props.config}
           value={props.search}
+          onChange={props.onChangeSearch}
           onSearch={props.onSearch} />
 
         <button