Merge pull request #1837 from yext/hotfixv1.16.2

techops10133: fix multiple search bars on a page
yext · Oct 4, 2023 · 002cb23 · 002cb23
2 parents 7099764 + 354f75c
commit 002cb23
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/src/ui/components/search/autocompletecomponent.js b/src/ui/components/search/autocompletecomponent.js
@@ -214,6 +214,7 @@ export default class AutoCompleteComponent extends Component {
       resultIndex: this._resultIndex,
       promptHeader: this._originalQuery.length === 0 ? this.promptHeader : null,
       listLabelIdName: this.listLabelIdName,
+      autocompleteContainerIdName: `yxt-AutoComplete-container-${this._config.name.replaceAll('.', '-')}`,
       eventOptions: this.eventOptions(data)
     }));
   }

diff --git a/src/ui/components/search/searchcomponent.js b/src/ui/components/search/searchcomponent.js
@@ -678,6 +678,7 @@ export default class SearchComponent extends Component {
       labelText: this.labelText,
       inputLabelIdName: this.inputLabelIdName,
       submitIcon: this.submitIcon,
+      searchBarContainerId: this._container.id,
       submitText: this.submitText,
       clearText: this.clearText,
       showClearButton: this._showClearButton,

diff --git a/src/ui/templates/search/search.hbs b/src/ui/templates/search/search.hbs
@@ -23,10 +23,10 @@
           aria-label="{{labelText}}"
           aria-autocomplete="list"
           aria-controls="{{autocompleteContainerIdName}}"
-          aria-describedby="instructions"
+          aria-describedby="{{searchBarContainerId}}-instructions"
           aria-haspopup="listbox"
         >
-        <div id="instructions" class="yxt-SearchBar-instructions sr-only">
+        <div id="{{searchBarContainerId}}-instructions" class="yxt-SearchBar-instructions sr-only">
           {{translate
             phrase='When autocomplete results are available, use up and down arrows to review and enter to select.'
           }}