@patternfly/react-core 6.0.0-alpha.60 → 6.0.0-alpha.61

package/src/components/Radio/examples/Radio.md

@@ -12,44 +12,55 @@ ouia: true
 ### Controlled
 
 ```ts file="./RadioControlled.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="./RadioUncontrolled.tsx"
+
 ```
 
 ### Reversed
 
 ```ts file="./RadioReversed.tsx"
+
 ```
 
 ### Label wraps
 
+You can expand the clickable area of a radio so that it spans wider than the radio label by adding the `isLabelWrapped` property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.
+
 ```ts file="./RadioLabelWraps.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./RadioDisabled.tsx"
+
 ```
 
 ### With description
 
 ```ts file="./RadioWithDescription.tsx"
+
 ```
 
 ### With body
 
 ```ts file="./RadioWithBody.tsx"
+
 ```
 
 ### With description and body
 
 ```ts file="./RadioWithDescriptionAndBody.tsx"
+
 ```
 
 ### Standalone input
 
 ```ts file="./RadioStandaloneInput.tsx"
+
 ```

package/src/components/Select/Select.tsx

@@ -53,6 +53,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   toggle: SelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
   /** Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. */
   shouldFocusToggleOnSelect?: boolean;
+  /** @beta Flag indicating the first menu item should be focused after opening the menu. */
+  shouldFocusFirstItemOnOpen?: boolean;
   /** Function callback when user selects an option. */
   onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
   /** Callback to allow the select component to change the open state of the menu.
@@ -86,6 +88,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   selected,
   toggle,
   shouldFocusToggleOnSelect = false,
+  shouldFocusFirstItemOnOpen = true,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
   isPlain,
@@ -125,7 +128,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
 
     const handleClick = (event: MouseEvent) => {
       // toggle was opened, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
+      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();
@@ -160,7 +163,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       }}
       isPlain={isPlain}
       selected={selected}
-      isScrollable={isScrollable}
+      isScrollable={isScrollable ?? (menuHeight !== undefined || maxMenuHeight !== undefined)}
       {...getOUIAProps(
         Select.displayName,
         props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),

package/src/components/Select/examples/Select.md

@@ -83,6 +83,10 @@ Typeahead is a select variant that replaces the typical button toggle for openin
 
 To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
+
 ```ts file="./SelectTypeahead.tsx"
 
 ```
@@ -96,6 +100,12 @@ To enable the creation ability, pass a predetermined `value` into a `<SelectOpti
 
 The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
 
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
+
+To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
+
+The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
+
 ```ts file="./SelectTypeaheadCreatable.tsx"
 
 ```
@@ -107,6 +117,10 @@ A multiple typeahead can be used to allow users to select multiple options from
 
 When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
+When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
+
 ```ts file="./SelectMultiTypeahead.tsx"
 
 ```
@@ -116,6 +130,8 @@ If the text that is entered into a typeahead doesn't match a menu item, users ca
 
 If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
@@ -125,6 +141,8 @@ By default, a multiple typeahead select allows you to select multiple menu items
 
 By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
+
 ```ts file="./SelectMultiTypeaheadCheckbox.tsx"
 
 ```

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -30,9 +30,11 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string[]>([]);
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItem, setActiveItem] = React.useState<string | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
 
+  const NO_RESULTS = 'no results';
+
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
@@ -45,7 +47,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${inputValue}"`, value: 'no results' }
+          { isAriaDisabled: true, children: `No results found for "${inputValue}"`, value: NO_RESULTS }
         ];
       }
 
@@ -56,56 +58,113 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
     }
 
     setSelectOptions(newSelectOptions);
-    setFocusedItemIndex(null);
-    setActiveItem(null);
   }, [inputValue]);
 
+  const createItemId = (value: any) => `select-multi-typeahead-${value.replace(' ', '-')}`;
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
+  const onSelect = (value: string) => {
+    if (value && value !== NO_RESULTS) {
+      // eslint-disable-next-line no-console
+      console.log('selected', value);
+
+      setSelected(
+        selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]
+      );
+    }
+
+    textInputRef.current?.focus();
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    resetActiveAndFocusedItem();
+  };
+
   const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
+    let indexToFocus = 0;
 
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
           indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
         }
       }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
 
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
         }
       }
-
-      setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-multi-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
+
+    setActiveAndFocusedItem(indexToFocus);
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((menuItem) => !menuItem.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
-      // Select the first available option
       case 'Enter':
+        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
+          onSelect(focusedItem.value);
+        }
+
         if (!isOpen) {
-          setIsOpen((prevIsOpen) => !prevIsOpen);
-        } else if (isOpen && focusedItem.value !== 'no results') {
-          onSelect(focusedItem.value as string);
+          setIsOpen(true);
         }
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
+
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -117,23 +176,14 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
   };
 
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
-    setInputValue(value);
-  };
-
-  const onSelect = (value: string) => {
-    // eslint-disable-next-line no-console
-    console.log('selected', value);
-
-    if (value && value !== 'no results') {
-      setSelected(
-        selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]
-      );
-    }
-
-    textInputRef.current?.focus();
+  const onClearButtonClick = () => {
+    setSelected([]);
+    setInputValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
@@ -148,14 +198,14 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}
-          onClick={onToggleClick}
+          onClick={onInputClick}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
           id="multi-typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
           placeholder="Select a state"
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
           role="combobox"
           isExpanded={isOpen}
           aria-controls="select-multi-typeahead-listbox"
@@ -175,20 +225,10 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
             ))}
           </LabelGroup>
         </TextInputGroupMain>
-        <TextInputGroupUtilities>
-          {selected.length > 0 && (
-            <Button
-              variant="plain"
-              onClick={() => {
-                setInputValue('');
-                setSelected([]);
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
-          )}
+        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>
@@ -199,9 +239,12 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       id="multi-typeahead-select"
       isOpen={isOpen}
       selected={selected}
-      onSelect={(ev, selection) => onSelect(selection as string)}
-      onOpenChange={() => setIsOpen(false)}
+      onSelect={(_event, selection) => onSelect(selection as string)}
+      onOpenChange={(isOpen) => {
+        !isOpen && closeMenu();
+      }}
       toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (
@@ -209,7 +252,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
             key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            id={`select-multi-typeahead-${option.value.replace(' ', '-')}`}
+            id={createItemId(option.value)}
             {...option}
             ref={null}
           />

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -28,10 +28,12 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string[]>([]);
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItem, setActiveItem] = React.useState<string | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
   const [placeholder, setPlaceholder] = React.useState('0 items selected');
   const textInputRef = React.useRef<HTMLInputElement>();
 
+  const NO_RESULTS = 'no results';
+
   React.useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
@@ -45,9 +47,9 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       if (!newSelectOptions.length) {
         newSelectOptions = [
           {
-            isDisabled: false,
+            isAriaDisabled: true,
             children: `No results found for "${inputValue}"`,
-            value: 'no results',
+            value: NO_RESULTS,
             hasCheckbox: false
           }
         ];
@@ -60,56 +62,99 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
     }
 
     setSelectOptions(newSelectOptions);
-    setFocusedItemIndex(null);
-    setActiveItem(null);
   }, [inputValue]);
 
+  React.useEffect(() => {
+    setPlaceholder(`${selected.length} item${selected.length !== 1 ? 's' : ''} selected`);
+  }, [selected]);
+
+  const createItemId = (value: any) => `select-multi-typeahead-${value.replace(' ', '-')}`;
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(createItemId(focusedItem.value));
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
   const handleMenuArrowKeys = (key: string) => {
-    let indexToFocus;
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    if (key === 'ArrowUp') {
+      // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+      if (focusedItemIndex === null || focusedItemIndex === 0) {
+        indexToFocus = selectOptions.length - 1;
+      } else {
+        indexToFocus = focusedItemIndex - 1;
+      }
 
-    if (isOpen) {
-      if (key === 'ArrowUp') {
-        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
-        if (focusedItemIndex === null || focusedItemIndex === 0) {
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
           indexToFocus = selectOptions.length - 1;
-        } else {
-          indexToFocus = focusedItemIndex - 1;
         }
       }
+    }
+
+    if (key === 'ArrowDown') {
+      // When no index is set or at the last index, focus to the first, otherwise increment focus index
+      if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+        indexToFocus = 0;
+      } else {
+        indexToFocus = focusedItemIndex + 1;
+      }
 
-      if (key === 'ArrowDown') {
-        // When no index is set or at the last index, focus to the first, otherwise increment focus index
-        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
           indexToFocus = 0;
-        } else {
-          indexToFocus = focusedItemIndex + 1;
         }
       }
-
-      setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-multi-typeahead-checkbox-${focusedItem.value.replace(' ', '-')}`);
     }
+
+    setActiveAndFocusedItem(indexToFocus);
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter((menuItem) => !menuItem.isDisabled);
-    const [firstMenuItem] = enabledMenuItems;
-    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
-      // Select the first available option
       case 'Enter':
+        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
+          onSelect(focusedItem.value);
+        }
+
         if (!isOpen) {
-          setIsOpen((prevIsOpen) => !prevIsOpen);
-        } else if (isOpen && focusedItem.value !== 'no results') {
-          onSelect(focusedItem.value as string);
+          setIsOpen(true);
         }
-        break;
-      case 'Tab':
-      case 'Escape':
-        setIsOpen(false);
-        setActiveItem(null);
+
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -121,17 +166,19 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
   };
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
+    resetActiveAndFocusedItem();
   };
 
   const onSelect = (value: string) => {
-    // eslint-disable-next-line no-console
-    console.log('selected', value);
+    if (value && value !== NO_RESULTS) {
+      // eslint-disable-next-line no-console
+      console.log('selected', value);
 
-    if (value && value !== 'no results') {
       setSelected(
         selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]
       );
@@ -140,9 +187,12 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
     textInputRef.current?.focus();
   };
 
-  React.useEffect(() => {
-    setPlaceholder(`${selected.length} items selected`);
-  }, [selected]);
+  const onClearButtonClick = () => {
+    setSelected([]);
+    setInputValue('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+  };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
@@ -156,32 +206,22 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}
-          onClick={onToggleClick}
+          onClick={onInputClick}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
           id="multi-typeahead-select-checkbox-input"
           autoComplete="off"
           innerRef={textInputRef}
           placeholder={placeholder}
-          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
           role="combobox"
           isExpanded={isOpen}
           aria-controls="select-multi-typeahead-checkbox-listbox"
         />
-        <TextInputGroupUtilities>
-          {selected.length > 0 && (
-            <Button
-              variant="plain"
-              onClick={() => {
-                setInputValue('');
-                setSelected([]);
-                textInputRef?.current?.focus();
-              }}
-              aria-label="Clear input value"
-            >
-              <TimesIcon aria-hidden />
-            </Button>
-          )}
+        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>
@@ -193,19 +233,22 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       id="multi-typeahead-checkbox-select"
       isOpen={isOpen}
       selected={selected}
-      onSelect={(ev, selection) => onSelect(selection as string)}
-      onOpenChange={() => setIsOpen(false)}
+      onSelect={(_event, selection) => onSelect(selection as string)}
+      onOpenChange={(isOpen) => {
+        !isOpen && closeMenu();
+      }}
       toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
     >
-      <SelectList id="select-multi-typeahead-checkbox-listbox">
+      <SelectList isAriaMultiselectable id="select-multi-typeahead-checkbox-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
-            {...(!option.isDisabled && { hasCheckbox: true })}
+            {...(!option.isDisabled && !option.isAriaDisabled && { hasCheckbox: true })}
             isSelected={selected.includes(option.value)}
             key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            id={`select-multi-typeahead-${option.value.replace(' ', '-')}`}
+            id={createItemId(option.value)}
             {...option}
             ref={null}
           />