lib: Improve key navigation in TypeaheadSelect and MultiTypeaheadSelect

In the TypeaheadSelect component, the focusedItemIndex is for the
filteredSelections array, not for the selectOptions one. Thus without
this fix, we would get the aria stuff wrong. We might even end up
accessing non-existing items, when focusedItemIndex refers to a "No
results found" fake entry in filteredSelections with index 0 while
selectOptions is empty.

The fake entries are now properly disabled and will be skipped by key
navigation in both TypeaheadSelect and MultiTypeaheadSelect.

Also, key navigation relies on there being at least one option that
will not be skipped. Thus, we need to us isEnabledMenu instead of
isMenu when deciding whether to return early. This got broken in
8d9f97b.

pkg/lib/cockpit-components-multi-typeahead-select.tsx

@@ -148,6 +148,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
         newSelectOptions = [
           {
             isAriaDisabled: true,
+            isDisabled: true,
             content:
               typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(inputValue),
             value: NO_RESULTS

pkg/lib/cockpit-components-typeahead-select.tsx

@@ -274,6 +274,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
         newSelectOptions = [
           {
             isAriaDisabled: true,
+            isDisabled: true,
             content:
               typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(filterValue),
             value: NO_RESULTS
@@ -287,6 +288,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       newSelectOptions = [
         {
           isAriaDisabled: true,
+          isDisabled: true,
           content: noOptionsAvailableMessage,
           value: NO_RESULTS
         }
@@ -316,7 +318,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 
   const setActiveAndFocusedItem = (itemIndex: number) => {
     setFocusedItemIndex(itemIndex);
-    const focusedItem = selectOptions[itemIndex] as TypeaheadSelectMenuOption;
+    const focusedItem = filteredSelections[itemIndex] as TypeaheadSelectMenuOption;
     setActiveItemId(String(focusedItem.value));
   };
 
@@ -384,7 +386,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 
     openMenu();
 
-    if (filteredSelections.every(o => !isMenu(o))) {
+    if (filteredSelections.every(o => !isEnabledMenu(o))) {
       return;
     }