lib: Some TypeaheadSelect and MultiTypeaheadSelect improvements

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

@@ -76,6 +76,8 @@ SOFTWARE.
      done. And there is no visual nesting going on anyway. Keeping the
      options a flat list is just all around easier.
 
+   - Support for a footer.
+
 */
 
 /* eslint-disable */
@@ -88,6 +90,7 @@ import {
   SelectList,
   SelectOptionProps,
   MenuToggle,
+  MenuFooter,
   MenuToggleElement,
   TextInputGroup,
   TextInputGroupMain,
@@ -164,6 +167,8 @@ export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSe
   noOptionsFoundMessage?: string | ((filter: string) => string);
   /** Flag indicating the select should be disabled. */
   isDisabled?: boolean;
+  /** Optional footer */
+  footer?: React.ReactNode;
   /** Width of the toggle. */
   toggleWidth?: string;
   /** Additional props passed to the toggle. */
@@ -208,6 +213,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   isCreateOptionOnTop = false,
   createOptionMessage = "",
   isDisabled = false,
+  footer = null,
   toggleWidth,
   toggleProps,
   ...props
@@ -268,6 +274,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
         newSelectOptions = [
           {
             isAriaDisabled: true,
+            isDisabled: true,
             content:
               typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(filterValue),
             value: NO_RESULTS
@@ -281,6 +288,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       newSelectOptions = [
         {
           isAriaDisabled: true,
+          isDisabled: true,
           content: noOptionsAvailableMessage,
           value: NO_RESULTS
         }
@@ -310,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));
   };
 
@@ -378,7 +386,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 
     openMenu();
 
-    if (filteredSelections.every(o => !isMenu(o))) {
+    if (filteredSelections.every(o => !isEnabledMenu(o))) {
       return;
     }
 
@@ -535,6 +543,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
           );
         })}
       </SelectList>
+      { footer && <MenuFooter>{footer}</MenuFooter> }
     </Select>
   );
 };