diff --git a/pkg/lib/cockpit-components-multi-typeahead-select.tsx b/pkg/lib/cockpit-components-multi-typeahead-select.tsx index b5709e52d3b3..7606497c37d6 100644 --- a/pkg/lib/cockpit-components-multi-typeahead-select.tsx +++ b/pkg/lib/cockpit-components-multi-typeahead-select.tsx @@ -148,6 +148,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent 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 isCreateOptionOnTop = false, createOptionMessage = "", isDisabled = false, + footer = null, toggleWidth, toggleProps, ...props @@ -268,6 +274,7 @@ export const TypeaheadSelectBase: React.FunctionComponent newSelectOptions = [ { isAriaDisabled: true, + isDisabled: true, content: typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(filterValue), value: NO_RESULTS @@ -281,6 +288,7 @@ export const TypeaheadSelectBase: React.FunctionComponent newSelectOptions = [ { isAriaDisabled: true, + isDisabled: true, content: noOptionsAvailableMessage, value: NO_RESULTS } @@ -310,7 +318,7 @@ export const TypeaheadSelectBase: React.FunctionComponent 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 openMenu(); - if (filteredSelections.every(o => !isMenu(o))) { + if (filteredSelections.every(o => !isEnabledMenu(o))) { return; } @@ -535,6 +543,7 @@ export const TypeaheadSelectBase: React.FunctionComponent ); })} + { footer && {footer} } ); };