feedback

yext · Oct 27, 2021 · e95ebec · e95ebec
1 parent aaa27ba
commit e95ebec
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/sample-app/src/components/Dropdown.tsx b/sample-app/src/components/Dropdown.tsx
@@ -9,6 +9,7 @@ interface Props {
   options: Option[],
   onClickOption?: (option: Option) => void,
   focusedOptionIndex: number | undefined,
+  optionIdPrefix: string,
   cssClasses: {
     optionContainer: string,
     option: string,
@@ -23,6 +24,7 @@ export default function Dropdown({
   options,
   onClickOption = () => {},
   focusedOptionIndex,
+  optionIdPrefix,
   cssClasses
 }: Props): JSX.Element | null {
   function renderOption(option: Option, index: number) {
@@ -33,7 +35,7 @@ export default function Dropdown({
       <div 
         key={index}
         className={className}
-        id={`${cssClasses.option}-${index}`}
+        id={`${optionIdPrefix}-${index}`}
         onClick={() => onClickOption(option)}>
         {option.render()}
       </div>)

diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -5,6 +5,7 @@ interface Props {
   inputValue?: string,
   placeholder?: string,
   options: Option[],
+  optionIdPrefix: string,
   onSubmit?: (value: string) => void,
   updateInputValue: (value: string) => void,
   updateDropdown: () => void,
@@ -46,6 +47,7 @@ export default function InputDropdown({
   inputValue = '',
   placeholder,
   options,
+  optionIdPrefix,
   onSubmit = () => {},
   updateInputValue,
   updateDropdown,
@@ -61,7 +63,7 @@ export default function InputDropdown({
   });
   const focusOptionId = focusedOptionIndex === undefined 
     ? undefined
-    : `${cssClasses.option}-${focusedOptionIndex}`;
+    : `${optionIdPrefix}-${focusedOptionIndex}`;
 
   const [latestUserInput, setLatestUserInput] = useState(inputValue);
 
@@ -134,6 +136,7 @@ export default function InputDropdown({
       {shouldDisplayDropdown &&
         <Dropdown
           options={options}
+          optionIdPrefix={optionIdPrefix}
           onClickOption={option => {
             updateInputValue(option.value);
             onSubmit(option.value)

diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -60,6 +60,7 @@ export default function SearchBar({ placeholder, isVertical }: Props) {
             render: () => renderWithHighlighting(result)
           }
         })}
+        optionIdPrefix='Autocomplete__option'
         onSubmit={executeQuery}
         updateInputValue={value => {
           answersActions.setQuery(value);