Tweaks

yext · Nov 24, 2021 · 8d540eb · 8d540eb
1 parent 6a2bee8
commit 8d540eb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/sample-app/src/components/InputDropdown.tsx b/sample-app/src/components/InputDropdown.tsx
@@ -112,7 +112,11 @@ export default function InputDropdown({
       }
       dispatch({ type: 'FocusSection', newIndex: newSectionIndex });
     } else if (focusedSectionIndex === numSections - 1 && !focusNext) {
-      dispatch({ type: 'FocusSection', newIndex: focusedSectionIndex - 1 });
+      let newSectionIndex: number | undefined = focusedSectionIndex - 1;
+      if (newSectionIndex < 0) {
+        newSectionIndex = undefined;
+      }
+      dispatch({ type: 'FocusSection', newIndex: newSectionIndex });
     }
   }
 
@@ -154,6 +158,9 @@ export default function InputDropdown({
     }
   }
 
+  console.log(numSections);
+  console.log(focusedSectionIndex);
+
   return (
     <>
       <div className={cssClasses.inputContainer}>

diff --git a/sample-app/src/components/SearchBar.tsx b/sample-app/src/components/SearchBar.tsx
@@ -98,24 +98,27 @@ export default function SearchBar({
           inputContainer: 'SearchBar__inputContainer'
         }}
       >
-        <DropdownSection<Option>
-          options={options}
-          optionIdPrefix={`Autocomplete__option-${0}`}
-          onFocusChange={(value) => {
-            answersActions.setQuery(value);
-          }}
-          onClickOption={(option) => {
-            answersActions.setQuery(option.value);
-            executeQuery();
-          }}
-          cssClasses={{
-            sectionContainer: 'Autocomplete__dropdownSection',
-            sectionLabel: 'Autocomplete__sectionLabel',
-            optionsContainer: 'Autocomplete_sectionOptions',
-            option: 'Autocomplete__option',
-            focusedOption: 'Autocomplete__option--focused'
-          }}
-        />
+        {
+          options.length > 0 &&
+          <DropdownSection<Option>
+            options={options}
+            optionIdPrefix={`Autocomplete__option-${0}`}
+            onFocusChange={(value) => {
+              answersActions.setQuery(value);
+            }}
+            onClickOption={(option) => {
+              answersActions.setQuery(option.value);
+              executeQuery();
+            }}
+            cssClasses={{
+              sectionContainer: 'Autocomplete__dropdownSection',
+              sectionLabel: 'Autocomplete__sectionLabel',
+              optionsContainer: 'Autocomplete_sectionOptions',
+              option: 'Autocomplete__option',
+              focusedOption: 'Autocomplete__option--focused'
+            }}
+          />
+        }
       </InputDropdown>
     </div>
   )