@patternfly/react-core 5.0.0-alpha.1 → 5.0.0-alpha.100

package/src/components/Select/Select.tsx

@@ -1,1487 +1,133 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Select/select';
-import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+import React from 'react';
 import { css } from '@patternfly/react-styles';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import { SelectMenu } from './SelectMenu';
-import { SelectOption, SelectOptionObject } from './SelectOption';
-import { SelectGroup, SelectGroupProps } from './SelectGroup';
-import { SelectToggle } from './SelectToggle';
-import {
-  SelectContext,
-  SelectVariant,
-  SelectPosition,
-  SelectDirection,
-  SelectFooterTabbableItems
-} from './selectConstants';
-import { ChipGroup, ChipGroupProps } from '../ChipGroup';
-import { Chip } from '../Chip';
-import { Spinner } from '../Spinner';
-import {
-  keyHandler,
-  getNextIndex,
-  getOUIAProps,
-  OUIAProps,
-  getDefaultOUIAId,
-  PickOptional,
-  GenerateId
-} from '../../helpers';
-import { KeyTypes } from '../../helpers/constants';
-import { Divider } from '../Divider';
-import { Popper } from '../../helpers/Popper/Popper';
-import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
-import { ValidatedOptions } from '../../helpers/constants';
-import { findTabbableElements } from '../../helpers/util';
-
-// seed for the aria-labelledby ID
-let currentId = 0;
-
-export interface SelectViewMoreObject {
-  /** View more text */
-  text: string;
-  /** Callback for when the view more button is clicked */
-  onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
-}
-export interface SelectProps
-  extends Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>,
-    OUIAProps {
-  /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
-  children?: React.ReactElement[];
-  /** Classes applied to the root of the Select */
+import { Menu, MenuContent, MenuProps } from '../Menu';
+import { Popper, PopperProps } from '../../helpers/Popper/Popper';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+
+export interface SelectProps extends MenuProps, OUIAProps {
+  /** Anything which can be rendered in a select */
+  children?: React.ReactNode;
+  /** Classes applied to root element of select */
   className?: string;
-  /** Indicates where menu will be aligned horizontally */
-  position?: SelectPosition | 'right' | 'left';
-  /** Flag specifying which direction the Select menu expands */
-  direction?: 'up' | 'down';
   /** Flag to indicate if select is open */
   isOpen?: boolean;
-  /** Flag to indicate if select options are grouped */
-  isGrouped?: boolean;
-  /** Display the toggle with no border or background */
+  /** Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the SelectOption. */
+  selected?: any | any[];
+  /** Renderer for a custom select toggle. Forwards a ref to the toggle. */
+  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Function callback when user selects an option. */
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  /** Callback to allow the select component to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
-  /** Flag to indicate if select is disabled */
-  isDisabled?: boolean;
-  /** Flag to indicate if the typeahead select allows new items */
-  isCreatable?: boolean;
-  /** Flag to indicate if create option should be at top of typeahead */
-  isCreateOptionOnTop?: boolean;
-  /** Flag indicating if placeholder styles should be applied */
-  hasPlaceholderStyle?: boolean;
-  /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
-  isCreateSelectOptionObject?: boolean;
-  /** Value to indicate if the select is modified to show that validation state.
-   * If set to success, select will be modified to indicate valid state.
-   * If set to error, select will be modified to indicate error state.
-   * If set to warning, select will be modified to indicate warning state.
-   */
-  validated?: 'success' | 'warning' | 'error' | 'default';
-  /** @beta Loading variant to display either the spinner or the view more text button */
-  loadingVariant?: 'spinner' | SelectViewMoreObject;
-  /** Text displayed in typeahead select to prompt the user to create an item */
-  createText?: string;
-  /** Title text of Select */
-  placeholderText?: string | React.ReactNode;
-  /** Text to display in typeahead select when no results are found */
-  noResultsFoundText?: string;
-  /** Array of selected items for multi select variants. */
-  selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
-  /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
-  isCheckboxSelectionBadgeHidden?: boolean;
-  /** Id for select toggle element */
-  toggleId?: string;
-  /** Adds accessible text to Select */
-  'aria-label'?: string;
-  /** Id of label for the Select aria-labelledby */
-  'aria-labelledby'?: string;
-  /** Id of div for the select aria-labelledby */
-  'aria-describedby'?: string;
-  /** Flag indicating if the select is an invalid state */
-  'aria-invalid'?: boolean;
-  /** Label for input field of type ahead select variants */
-  typeAheadAriaLabel?: string;
-  /** Id of div for input field of type ahead select variants */
-  typeAheadAriaDescribedby?: string;
-  /** Label for clear selection button of type ahead select variants */
-  clearSelectionsAriaLabel?: string;
-  /** Label for toggle of type ahead select variants */
-  toggleAriaLabel?: string;
-  /** Label for remove chip button of multiple type ahead select variant */
-  removeSelectionAriaLabel?: string;
-  /** ID list of favorited select items */
-  favorites?: string[];
-  /** Label for the favorites group */
-  favoritesLabel?: string;
-  /** Enables favorites. Callback called when a select options's favorite button is clicked */
-  onFavorite?: (itemId: string, isFavorite: boolean) => void;
-  /** Callback for selection behavior */
-  onSelect?: (
-    event: React.MouseEvent | React.ChangeEvent,
-    value: string | SelectOptionObject,
-    isPlaceholder?: boolean
-  ) => void;
-  /** Callback for toggle button behavior */
-  onToggle: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
-  /** Callback for toggle blur */
-  onBlur?: (event?: any) => void;
-  /** Callback for typeahead clear button */
-  onClear?: (event: React.MouseEvent) => void;
-  /** Optional callback for custom filtering */
-  onFilter?: (e: React.ChangeEvent<HTMLInputElement> | null, value: string) => React.ReactElement[] | undefined;
-  /** Optional callback for newly created options */
-  onCreateOption?: (newOptionValue: string) => void;
-  /** Optional event handler called each time the value in the typeahead input changes. */
-  onTypeaheadInputChanged?: (value: string) => void;
-  /** Variant of rendered Select */
-  variant?: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti';
-  /** Width of the select container as a number of px or string percentage */
-  width?: string | number;
-  /** Max height of the select container as a number of px or string percentage */
-  maxHeight?: string | number;
-  /** Icon element to render inside the select toggle */
-  toggleIcon?: React.ReactElement;
-  /** Custom icon for the dropdown replacing the CaretDownIcon */
-  toggleIndicator?: React.ReactElement;
-  /** Custom content to render in the select menu.  If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle */
-  customContent?: React.ReactNode;
-  /** Flag indicating if select should have an inline text input for filtering */
-  hasInlineFilter?: boolean;
-  /** Placeholder text for inline filter */
-  inlineFilterPlaceholderText?: string;
-  /** Custom text for select badge */
-  customBadgeText?: string | number;
-  /** Prefix for the id of the input in the checkbox select variant*/
-  inputIdPrefix?: string;
-  /** Value for the typeahead and inline filtering input autocomplete attribute. When targeting Chrome this property should be a random string. */
-  inputAutoComplete?: string;
-  /** Optional props to pass to the chip group in the typeaheadmulti variant */
-  chipGroupProps?: Omit<ChipGroupProps, 'children' | 'ref'>;
-  /** Optional props to render custom chip group in the typeaheadmulti variant */
-  chipGroupComponent?: React.ReactNode;
-  /** Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away */
-  isInputValuePersisted?: boolean;
-  /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
-  isInputFilterPersisted?: boolean;
-  /** Flag indicating the typeahead input value should reset upon selection */
-  shouldResetOnSelect?: boolean;
-  /** Content rendered in the footer of the select menu */
-  footer?: React.ReactNode;
-  /** The container to append the menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * menuAppendTo="parent"
-   * menuAppendTo={() => document.body}
-   * menuAppendTo={document.getElementById('target')}
-   */
-  menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-  /** Flag for indicating that the select menu should automatically flip vertically when
-   * it reaches the boundary. This prop can only be used when the select component is not
-   * appended inline, e.g. `menuAppendTo="parent"`
-   */
-  isFlipEnabled?: boolean;
-  /** z-index of the select menu when menuAppendTo is not inline. */
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** z-index of the select menu */
   zIndex?: number;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
-  ouiaSafe?: boolean;
+  /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
+  role?: string;
+  /** Additional properties to pass to the popper */
+  popperProps?: Partial<PopperProps>;
 }
 
-export interface SelectState {
-  focusFirstOption: boolean;
-  typeaheadInputValue: string | null;
-  typeaheadFilteredChildren: React.ReactNode[];
-  favoritesGroup: React.ReactNode[];
-  typeaheadCurrIndex: number;
-  creatableValue: string;
-  tabbedIntoFavoritesMenu: boolean;
-  typeaheadStoredIndex: number;
-  ouiaStateId: string;
-  viewMoreNextIndex: number;
-}
-
-export class Select extends React.Component<SelectProps & OUIAProps, SelectState> {
-  static displayName = 'Select';
-  private parentRef = React.createRef<HTMLDivElement>();
-  private menuComponentRef = React.createRef<HTMLElement>();
-  private filterRef = React.createRef<HTMLInputElement>();
-  private clearRef = React.createRef<HTMLButtonElement>();
-  private inputRef = React.createRef<HTMLInputElement>();
-  private refCollection: HTMLElement[][] = [[]];
-  private optionContainerRefCollection: HTMLElement[] = [];
-  private footerRef = React.createRef<HTMLDivElement>();
-
-  static defaultProps: PickOptional<SelectProps> = {
-    children: [] as React.ReactElement[],
-    className: '',
-    position: SelectPosition.left,
-    direction: SelectDirection.down,
-    toggleId: null as string,
-    isOpen: false,
-    isGrouped: false,
-    isPlain: false,
-    isDisabled: false,
-    hasPlaceholderStyle: false,
-    isCreatable: false,
-    isCreateOptionOnTop: false,
-    validated: 'default',
-    'aria-label': '',
-    'aria-labelledby': '',
-    'aria-describedby': '',
-    'aria-invalid': false,
-    typeAheadAriaLabel: '',
-    typeAheadAriaDescribedby: '',
-    clearSelectionsAriaLabel: 'Clear all',
-    toggleAriaLabel: 'Options menu',
-    removeSelectionAriaLabel: 'Remove',
-    selections: [],
-    createText: 'Create',
-    placeholderText: '',
-    noResultsFoundText: 'No results found',
-    variant: SelectVariant.single,
-    width: '',
-    onClear: () => undefined as void,
-    onCreateOption: () => undefined as void,
-    toggleIcon: null as React.ReactElement,
-    toggleIndicator: null as React.ReactElement,
-    onFilter: null,
-    onTypeaheadInputChanged: null,
-    customContent: null,
-    hasInlineFilter: false,
-    inlineFilterPlaceholderText: null,
-    customBadgeText: null,
-    inputIdPrefix: '',
-    inputAutoComplete: 'off',
-    menuAppendTo: 'inline',
-    favorites: [] as string[],
-    favoritesLabel: 'Favorites',
-    ouiaSafe: true,
-    chipGroupComponent: null,
-    isInputValuePersisted: false,
-    isInputFilterPersisted: false,
-    isCreateSelectOptionObject: false,
-    shouldResetOnSelect: true,
-    isFlipEnabled: true,
-    zIndex: 9999
-  };
-
-  state: SelectState = {
-    focusFirstOption: false,
-    typeaheadInputValue: null,
-    typeaheadFilteredChildren: React.Children.toArray(this.props.children),
-    favoritesGroup: [] as React.ReactNode[],
-    typeaheadCurrIndex: -1,
-    typeaheadStoredIndex: -1,
-    creatableValue: '',
-    tabbedIntoFavoritesMenu: false,
-    ouiaStateId: getDefaultOUIAId(Select.displayName, this.props.variant),
-    viewMoreNextIndex: -1
-  };
-
-  getTypeaheadActiveChild = (typeaheadCurrIndex: number) =>
-    this.refCollection[typeaheadCurrIndex] ? this.refCollection[typeaheadCurrIndex][0] : null;
-
-  componentDidUpdate = (prevProps: SelectProps, prevState: SelectState) => {
-    if (this.props.hasInlineFilter) {
-      this.refCollection[0][0] = this.filterRef.current;
-    }
-
-    // Move focus to top of the menu if state.focusFirstOption was updated to true and the menu does not have custom content
-    if (!prevState.focusFirstOption && this.state.focusFirstOption && !this.props.customContent) {
-      const firstRef = this.refCollection.find(
-        ref =>
-          // If a select option is disabled then ref[0] will be undefined, so we want to return
-          // the first ref that both a) is not null and b) is not disabled.
-          ref !== null && ref[0]
-      );
-
-      if (firstRef && firstRef[0]) {
-        firstRef[0].focus();
-      }
-    } else if (
-      // if viewMoreNextIndex is not -1, view more was clicked, set focus on first newly loaded item
-      this.state.viewMoreNextIndex !== -1 &&
-      this.refCollection.length > this.state.viewMoreNextIndex &&
-      this.props.loadingVariant !== 'spinner' &&
-      this.refCollection[this.state.viewMoreNextIndex][0] &&
-      this.props.variant !== 'typeahead' && // do not hard focus newly added items for typeahead variants
-      this.props.variant !== 'typeaheadmulti'
-    ) {
-      this.refCollection[this.state.viewMoreNextIndex][0].focus();
-      this.setState({ viewMoreNextIndex: -1 });
-    }
-
-    const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
-      Array.from(prevChildren).some((prevChild: React.ReactElement, index: number) => {
-        const prevChildProps = prevChild.props;
-        const currChild = currChildren[index];
-        const { props: currChildProps } = currChild;
-
-        if (prevChildProps && currChildProps) {
-          return (
-            prevChildProps.value !== currChildProps.value ||
-            prevChildProps.label !== currChildProps.label ||
-            prevChildProps.isDisabled !== currChildProps.isDisabled ||
-            prevChildProps.isPlaceholder !== currChildProps.isPlaceholder
-          );
-        } else {
-          return prevChild !== currChild;
-        }
-      });
-
-    const hasUpdatedChildren =
-      prevProps.children.length !== this.props.children.length ||
-      checkUpdatedChildren(prevProps.children, this.props.children) ||
-      (this.props.isGrouped &&
-        Array.from(prevProps.children).some(
-          (prevChild: React.ReactElement, index: number) =>
-            prevChild.type === SelectGroup &&
-            prevChild.props.children &&
-            this.props.children[index].props.children &&
-            (prevChild.props.children.length !== this.props.children[index].props.children.length ||
-              checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
-        ));
-
-    if (hasUpdatedChildren) {
-      this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
-    }
-
-    // for menus with favorites,
-    // if the number of favorites or typeahead filtered children has changed, the generated
-    // list of favorites needs to be updated
-    if (
-      this.props.onFavorite &&
-      (this.props.favorites.length !== prevProps.favorites.length ||
-        this.state.typeaheadFilteredChildren !== prevState.typeaheadFilteredChildren)
-    ) {
-      const tempRenderableChildren =
-        this.props.variant === 'typeahead' || this.props.variant === 'typeaheadmulti'
-          ? this.state.typeaheadFilteredChildren
-          : this.props.children;
-      const renderableFavorites = createRenderableFavorites(
-        tempRenderableChildren,
-        this.props.isGrouped,
-        this.props.favorites
-      );
-      const favoritesGroup = renderableFavorites.length
-        ? [
-            <SelectGroup key="favorites" label={this.props.favoritesLabel}>
-              {renderableFavorites}
-            </SelectGroup>,
-            <Divider key="favorites-group-divider" />
-          ]
-        : [];
-      this.setState({ favoritesGroup });
-    }
-  };
-
-  onEnter = () => {
-    this.setState({ focusFirstOption: true });
-  };
-
-  onToggle = (isExpanded: boolean, e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => {
-    const { isInputValuePersisted, onSelect, onToggle, hasInlineFilter } = this.props;
-    if (!isExpanded && isInputValuePersisted && onSelect) {
-      onSelect(undefined, this.inputRef.current ? this.inputRef.current.value : '');
-    }
-    if (isExpanded && hasInlineFilter) {
-      this.setState({
-        focusFirstOption: true
-      });
-    }
-    onToggle(isExpanded, e);
-  };
-
-  onClose = () => {
-    const { isInputFilterPersisted } = this.props;
-
-    this.setState({
-      focusFirstOption: false,
-      typeaheadInputValue: null,
-      ...(!isInputFilterPersisted && {
-        typeaheadFilteredChildren: React.Children.toArray(this.props.children)
-      }),
-      typeaheadCurrIndex: -1,
-      tabbedIntoFavoritesMenu: false,
-      viewMoreNextIndex: -1
-    });
-  };
-
-  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value.toString() !== '' && !this.props.isOpen) {
-      this.onToggle(true, e);
-    }
-
-    if (this.props.onTypeaheadInputChanged) {
-      this.props.onTypeaheadInputChanged(e.target.value.toString());
-    }
-
-    this.setState({
-      typeaheadCurrIndex: -1,
-      typeaheadInputValue: e.target.value,
-      creatableValue: e.target.value
-    });
-    this.updateTypeAheadFilteredChildren(e.target.value.toString(), e);
-    this.refCollection = [[]];
-  };
-
-  updateTypeAheadFilteredChildren = (typeaheadInputValue: string, e: React.ChangeEvent<HTMLInputElement> | null) => {
-    let typeaheadFilteredChildren: any;
-
-    const {
-      onFilter,
-      isCreatable,
-      isCreateOptionOnTop,
-      onCreateOption,
-      createText,
-      noResultsFoundText,
-      children,
-      isGrouped,
-      isCreateSelectOptionObject,
-      loadingVariant
-    } = this.props;
-
-    if (onFilter) {
-      /* The updateTypeAheadFilteredChildren callback is not only called on input changes but also when the children change.
-       * In this case the e is null but we can get the typeaheadInputValue from the state.
-       */
-      typeaheadFilteredChildren = onFilter(e, e ? e.target.value : typeaheadInputValue) || children;
-    } else {
-      let input: RegExp;
-      try {
-        input = new RegExp(typeaheadInputValue.toString(), 'i');
-      } catch (err) {
-        input = new RegExp(typeaheadInputValue.toString().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
-      }
-      const childrenArray = React.Children.toArray(children) as React.ReactElement<SelectGroupProps>[];
-      if (isGrouped) {
-        const childFilter = (child: React.ReactElement<SelectGroupProps>) =>
-          child.props.value &&
-          child.props.value.toString &&
-          this.getDisplay(child.props.value.toString(), 'text').search(input) === 0;
-        typeaheadFilteredChildren =
-          typeaheadInputValue.toString() !== ''
-            ? React.Children.map(children, group => {
-                if (
-                  React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
-                  group.type === SelectGroup
-                ) {
-                  const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
-                    SelectGroupProps
-                  >[]).filter(childFilter);
-                  if (filteredGroupChildren.length > 0) {
-                    return React.cloneElement(group, {
-                      titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
-                      children: filteredGroupChildren as any
-                    });
-                  }
-                } else {
-                  return (React.Children.toArray(group) as React.ReactElement<SelectGroupProps>[]).filter(childFilter);
-                }
-              })
-            : childrenArray;
-      } else {
-        typeaheadFilteredChildren =
-          typeaheadInputValue.toString() !== ''
-            ? childrenArray.filter(child => {
-                const valueToCheck = child.props.value;
-                // Dividers don't have value and should not be filtered
-                if (!valueToCheck) {
-                  return true;
-                }
-
-                const isSelectOptionObject =
-                  typeof valueToCheck !== 'string' &&
-                  (valueToCheck as SelectOptionObject).toString &&
-                  (valueToCheck as SelectOptionObject).compareTo;
-
-                // View more option should be returned as not a match
-                if (loadingVariant !== 'spinner' && loadingVariant?.text === valueToCheck) {
-                  return true;
-                }
-
-                // spinner should be returned as not a match
-                if (loadingVariant === 'spinner' && valueToCheck === 'loading') {
-                  return true;
-                }
-
-                if (isSelectOptionObject) {
-                  return (valueToCheck as SelectOptionObject).compareTo(typeaheadInputValue);
-                } else {
-                  return this.getDisplay(child.props.value.toString(), 'text').search(input) === 0;
-                }
-              })
-            : childrenArray;
-      }
-    }
-    if (!typeaheadFilteredChildren) {
-      typeaheadFilteredChildren = [];
-    }
-    if (typeaheadFilteredChildren.length === 0) {
-      !isCreatable &&
-        typeaheadFilteredChildren.push(
-          <SelectOption isDisabled key="no-results" value={noResultsFoundText} isNoResultsOption />
-        );
-    }
-    if (isCreatable && typeaheadInputValue !== '') {
-      const newValue = typeaheadInputValue;
+const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
+  children,
+  className,
+  onSelect,
+  isOpen,
+  selected,
+  toggle,
+  onOpenChange,
+  isPlain,
+  innerRef,
+  zIndex = 9999,
+  role = 'listbox',
+  popperProps,
+  ...props
+}: SelectProps & OUIAProps) => {
+  const localMenuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
+
+  const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      // Close the menu on tab or escape if onOpenChange is provided
       if (
-        !typeaheadFilteredChildren.find(
-          (i: React.ReactElement) =>
-            i.props.value && i.props.value.toString().toLowerCase() === newValue.toString().toLowerCase()
-        )
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
       ) {
-        const newOptionValue = isCreateSelectOptionObject
-          ? ({
-              toString: () => newValue,
-              compareTo: value =>
-                this.toString()
-                  .toLowerCase()
-                  .includes(value.toString().toLowerCase())
-            } as SelectOptionObject)
-          : newValue;
-
-        const createSelectOption = (
-          <SelectOption
-            key={`create ${newValue}`}
-            value={newOptionValue}
-            onClick={() => onCreateOption && onCreateOption(newValue)}
-          >
-            {createText} "{newValue}"
-          </SelectOption>
-        );
-
-        if (isCreateOptionOnTop) {
-          typeaheadFilteredChildren.unshift(createSelectOption);
-        } else {
-          typeaheadFilteredChildren.push(createSelectOption);
+        if (event.key === 'Escape' || event.key === 'Tab') {
+          onOpenChange(false);
+          toggleRef.current?.focus();
         }
       }
-    }
-
-    this.setState({
-      typeaheadFilteredChildren
-    });
-  };
-
-  onClick = (e: React.MouseEvent) => {
-    if (!this.props.isOpen) {
-      this.onToggle(true, e);
-    }
-  };
-
-  clearSelection = (_e: React.MouseEvent) => {
-    this.setState({
-      typeaheadInputValue: null,
-      typeaheadFilteredChildren: React.Children.toArray(this.props.children),
-      typeaheadCurrIndex: -1
-    });
-  };
-
-  extendTypeaheadChildren(typeaheadCurrIndex: number, favoritesGroup?: React.ReactNode[]) {
-    const { isGrouped, onFavorite, createText } = this.props;
-    const typeaheadChildren = favoritesGroup
-      ? favoritesGroup.concat(this.state.typeaheadFilteredChildren)
-      : this.state.typeaheadFilteredChildren;
-    const activeElement = this.optionContainerRefCollection[typeaheadCurrIndex];
-
-    let typeaheadActiveChild = this.getTypeaheadActiveChild(typeaheadCurrIndex);
-    if (typeaheadActiveChild && typeaheadActiveChild.classList.contains('pf-m-description')) {
-      typeaheadActiveChild = typeaheadActiveChild.firstElementChild as HTMLElement;
-    }
-
-    this.refCollection = [[]];
-    this.optionContainerRefCollection = [];
-    if (isGrouped) {
-      return React.Children.map(typeaheadChildren as React.ReactElement[], (group: React.ReactElement) => {
-        if (group.type === Divider) {
-          return group;
-        } else if (group.type === SelectGroup && onFavorite) {
-          return React.cloneElement(group, {
-            titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
-            children: React.Children.map(group.props.children, (child: React.ReactElement) =>
-              child.type === Divider
-                ? child
-                : React.cloneElement(child as React.ReactElement, {
-                    isFocused:
-                      activeElement &&
-                      (activeElement.id === (child as React.ReactElement).props.id ||
-                        (this.props.isCreatable &&
-                          typeaheadActiveChild.textContent ===
-                            `${createText} "${(group as React.ReactElement).props.value}"`))
-                  })
-            )
-          });
-        } else if (group.type === SelectGroup) {
-          return React.cloneElement(group, {
-            titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
-            children: React.Children.map(group.props.children, (child: React.ReactElement) =>
-              child.type === Divider
-                ? child
-                : React.cloneElement(child as React.ReactElement, {
-                    isFocused:
-                      typeaheadActiveChild &&
-                      (typeaheadActiveChild.textContent === (child as React.ReactElement).props.value.toString() ||
-                        (this.props.isCreatable &&
-                          typeaheadActiveChild.textContent ===
-                            `${createText} "${(child as React.ReactElement).props.value}"`))
-                  })
-            )
-          });
-        } else {
-          // group has been filtered down to SelectOption
-          return React.cloneElement(group as React.ReactElement, {
-            isFocused:
-              typeaheadActiveChild &&
-              (typeaheadActiveChild.textContent === group.props.value.toString() ||
-                (this.props.isCreatable && typeaheadActiveChild.textContent === `${createText} "${group.props.value}"`))
-          });
-        }
-      });
-    }
-    return typeaheadChildren.map((child: React.ReactNode, index) => {
-      const childElement = child as any;
-      return childElement.type.displayName === 'Divider'
-        ? child
-        : React.cloneElement(child as React.ReactElement, {
-            isFocused: typeaheadActiveChild
-              ? typeaheadActiveChild.textContent === (child as React.ReactElement).props.value.toString() ||
-                (this.props.isCreatable &&
-                  typeaheadActiveChild.textContent === `${createText} "${(child as React.ReactElement).props.value}"`)
-              : index === typeaheadCurrIndex // fallback for view more + typeahead use cases, when the new expanded list is loaded and refCollection hasn't be updated yet
-          });
-    });
-  }
-
-  sendRef = (
-    optionRef: React.ReactNode,
-    favoriteRef: React.ReactNode,
-    optionContainerRef: React.ReactNode,
-    index: number
-  ) => {
-    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
-    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
-  };
-
-  handleMenuKeys = (index: number, innerIndex: number, position: string) => {
-    keyHandler(index, innerIndex, position, this.refCollection, this.refCollection);
-    if (this.props.variant === SelectVariant.typeahead || this.props.variant === SelectVariant.typeaheadMulti) {
-      if (position !== 'tab') {
-        this.handleTypeaheadKeys(position);
-      }
-    }
-  };
-
-  moveFocus = (nextIndex: number, updateCurrentIndex: boolean = true) => {
-    const { isCreatable, createText } = this.props;
-
-    const hasDescriptionElm = Boolean(
-      this.refCollection[nextIndex][0] && this.refCollection[nextIndex][0].classList.contains('pf-m-description')
-    );
-    const isLoad = Boolean(
-      this.refCollection[nextIndex][0] && this.refCollection[nextIndex][0].classList.contains('pf-m-load')
-    );
-    const optionTextElm = hasDescriptionElm
-      ? (this.refCollection[nextIndex][0].firstElementChild as HTMLElement)
-      : this.refCollection[nextIndex][0];
-
-    let typeaheadInputValue = '';
-    if (isCreatable && optionTextElm.textContent.includes(createText)) {
-      typeaheadInputValue = this.state.creatableValue;
-    } else if (optionTextElm && !isLoad) {
-      // !isLoad prevents the view more button text from appearing the typeahead input
-      typeaheadInputValue = optionTextElm.textContent;
-    }
-    this.setState(prevState => ({
-      typeaheadCurrIndex: updateCurrentIndex ? nextIndex : prevState.typeaheadCurrIndex,
-      typeaheadStoredIndex: nextIndex,
-      typeaheadInputValue
-    }));
-  };
-
-  switchFocusToFavoriteMenu = () => {
-    const { typeaheadCurrIndex, typeaheadStoredIndex } = this.state;
-    let indexForFocus = 0;
-
-    if (typeaheadCurrIndex !== -1) {
-      indexForFocus = typeaheadCurrIndex;
-    } else if (typeaheadStoredIndex !== -1) {
-      indexForFocus = typeaheadStoredIndex;
-    }
-
-    if (this.refCollection[indexForFocus] !== null && this.refCollection[indexForFocus][0] !== null) {
-      this.refCollection[indexForFocus][0].focus();
-    } else {
-      this.clearRef.current.focus();
-    }
-
-    this.setState({
-      tabbedIntoFavoritesMenu: true,
-      typeaheadCurrIndex: -1
-    });
-  };
-
-  moveFocusToLastMenuItem = () => {
-    const refCollectionLen = this.refCollection.length;
-    if (
-      refCollectionLen > 0 &&
-      this.refCollection[refCollectionLen - 1] !== null &&
-      this.refCollection[refCollectionLen - 1][0] !== null
-    ) {
-      this.refCollection[refCollectionLen - 1][0].focus();
-    }
-  };
-
-  handleTypeaheadKeys = (position: string, shiftKey: boolean = false) => {
-    const { isOpen, onFavorite, isCreatable } = this.props;
-    const { typeaheadCurrIndex, tabbedIntoFavoritesMenu } = this.state;
-    const typeaheadActiveChild = this.getTypeaheadActiveChild(typeaheadCurrIndex);
-    if (isOpen) {
-      if (position === 'enter') {
-        if (
-          (typeaheadCurrIndex !== -1 || (isCreatable && this.refCollection.length === 1)) && // do not allow selection without moving to an initial option unless it is a single create option
-          (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))
-        ) {
-          if (typeaheadActiveChild) {
-            if (!typeaheadActiveChild.classList.contains('pf-m-load')) {
-              const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
-              const typeaheadActiveChildText = hasDescriptionElm
-                ? (typeaheadActiveChild.firstChild as HTMLElement).textContent
-                : typeaheadActiveChild.textContent;
-              this.setState({
-                typeaheadInputValue: typeaheadActiveChildText
-              });
-            }
-          } else if (this.refCollection[0] && this.refCollection[0][0]) {
-            this.setState({
-              typeaheadInputValue: this.refCollection[0][0].textContent
-            });
-          }
-          if (typeaheadActiveChild) {
-            typeaheadActiveChild.click();
-          } else {
-            this.refCollection[0][0].click();
-          }
-        }
-      } else if (position === 'tab') {
-        if (onFavorite) {
-          // if the input has focus, tab to the first item or the last item that was previously focused.
-          if (this.inputRef.current === document.activeElement) {
-            // If shift is also clicked and there is a footer, tab to the last item in tabbable footer
-            if (this.props.footer && shiftKey) {
-              const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
-              if (tabbableItems.length > 0) {
-                if (tabbableItems[tabbableItems.length - 1]) {
-                  tabbableItems[tabbableItems.length - 1].focus();
-                }
-              }
-            } else {
-              this.switchFocusToFavoriteMenu();
-            }
-          } else {
-            // focus is on menu or footer
-            if (this.props.footer) {
-              let tabbedIntoMenu = false;
-              const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
-              if (tabbableItems.length > 0) {
-                // if current element is not in footer, tab to first tabbable element in footer,
-                // if shift was clicked, tab to input since focus is on menu
-                const currentElementIndex = tabbableItems.findIndex((item: any) => item === document.activeElement);
-                if (currentElementIndex === -1) {
-                  if (shiftKey) {
-                    // currently in menu, shift back to input
-                    this.inputRef.current.focus();
-                  } else {
-                    // currently in menu, tab to first tabbable item in footer
-                    tabbableItems[0].focus();
-                  }
-                } else {
-                  // already in footer
-                  if (shiftKey) {
-                    // shift to previous item
-                    if (currentElementIndex === 0) {
-                      // on first footer item, shift back to menu
-                      this.switchFocusToFavoriteMenu();
-                      tabbedIntoMenu = true;
-                    } else {
-                      // shift to previous footer item
-                      tabbableItems[currentElementIndex - 1].focus();
-                    }
-                  } else {
-                    // tab to next tabbable item in footer or to input.
-                    if (tabbableItems[currentElementIndex + 1]) {
-                      tabbableItems[currentElementIndex + 1].focus();
-                    } else {
-                      this.inputRef.current.focus();
-                    }
-                  }
-                }
-              } else {
-                // no tabbable items in footer, tab to input
-                this.inputRef.current.focus();
-                tabbedIntoMenu = false;
-              }
-              this.setState({ tabbedIntoFavoritesMenu: tabbedIntoMenu });
-            } else {
-              this.inputRef.current.focus();
-              this.setState({ tabbedIntoFavoritesMenu: false });
-            }
-          }
-        } else {
-          // Close if there is no footer
-          if (!this.props.footer) {
-            this.onToggle(false, null);
-            this.onClose();
-          } else {
-            // has footer
-            const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
-            const currentElementIndex = tabbableItems.findIndex((item: any) => item === document.activeElement);
-            if (this.inputRef.current === document.activeElement) {
-              if (shiftKey) {
-                // close toggle if shift key and tab on input
-                this.onToggle(false, null);
-                this.onClose();
-              } else {
-                // tab to first tabbable item in footer
-                if (tabbableItems[0]) {
-                  tabbableItems[0].focus();
-                } else {
-                  this.onToggle(false, null);
-                  this.onClose();
-                }
-              }
-            } else {
-              // focus is in footer
-              if (shiftKey) {
-                if (currentElementIndex === 0) {
-                  // shift tab back to input
-                  this.inputRef.current.focus();
-                } else {
-                  // shift to previous footer item
-                  tabbableItems[currentElementIndex - 1].focus();
-                }
-              } else {
-                // tab to next footer item or close tab if last item
-                if (tabbableItems[currentElementIndex + 1]) {
-                  tabbableItems[currentElementIndex + 1].focus();
-                } else {
-                  // no next item, close toggle
-                  this.onToggle(false, null);
-                  this.inputRef.current.focus();
-                  this.onClose();
-                }
-              }
-            }
-          }
-        }
-      } else if (!tabbedIntoFavoritesMenu) {
-        if (this.refCollection[0][0] === null) {
-          return;
-        }
-        let nextIndex;
-        if (typeaheadCurrIndex === -1 && position === 'down') {
-          nextIndex = 0;
-        } else if (typeaheadCurrIndex === -1 && position === 'up') {
-          nextIndex = this.refCollection.length - 1;
-        } else if (position !== 'left' && position !== 'right') {
-          nextIndex = getNextIndex(typeaheadCurrIndex, position, this.refCollection);
-        } else {
-          nextIndex = typeaheadCurrIndex;
-        }
-        if (this.refCollection[nextIndex] === null) {
-          return;
-        }
-        this.moveFocus(nextIndex);
-      } else {
-        const nextIndex = this.refCollection.findIndex(
-          ref => ref !== undefined && (ref[0] === document.activeElement || ref[1] === document.activeElement)
-        );
-        this.moveFocus(nextIndex);
-      }
-    }
-  };
-
-  onClickTypeaheadToggleButton = () => {
-    if (this.inputRef && this.inputRef.current) {
-      this.inputRef.current.focus();
-    }
-  };
-
-  getDisplay = (value: string | SelectOptionObject, type: 'node' | 'text' = 'node') => {
-    if (!value) {
-      return;
-    }
-    const item = this.props.isGrouped
-      ? (React.Children.toArray(this.props.children) as React.ReactElement[])
-          .reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
-          .find(child => child.props.value.toString() === value.toString())
-      : React.Children.toArray(this.props.children).find(
-          child =>
-            (child as React.ReactElement).props.value &&
-            (child as React.ReactElement).props.value.toString() === value.toString()
-        );
-    if (item) {
-      if (item && item.props.children) {
-        if (type === 'node') {
-          return item.props.children;
-        }
-        return this.findText(item);
-      }
-      return item.props.value.toString();
-    }
-    return value.toString();
-  };
-
-  findText = (item: React.ReactNode) => {
-    if (typeof item === 'string') {
-      return item;
-    } else if (!React.isValidElement(item)) {
-      return '';
-    } else {
-      const multi: string[] = [];
-      React.Children.toArray(item.props.children).forEach(child => multi.push(this.findText(child)));
-      return multi.join('');
-    }
-  };
-
-  generateSelectedBadge = () => {
-    const { customBadgeText, selections } = this.props;
-    if (customBadgeText !== null) {
-      return customBadgeText;
-    }
-    if (Array.isArray(selections) && selections.length > 0) {
-      return selections.length;
-    }
-    return null;
-  };
-
-  setVieMoreNextIndex = () => {
-    this.setState({ viewMoreNextIndex: this.refCollection.length - 1 });
-  };
-
-  isLastOptionBeforeFooter = (index: any) =>
-    this.props.footer && index === this.refCollection.length - 1 ? true : false;
-
-  render() {
-    const {
-      children,
-      chipGroupProps,
-      chipGroupComponent,
-      className,
-      customContent,
-      variant,
-      direction,
-      onSelect,
-      onClear,
-      onBlur,
-      toggleId,
-      isOpen,
-      isGrouped,
-      isPlain,
-      isDisabled,
-      hasPlaceholderStyle,
-      validated,
-      selections: selectionsProp,
-      typeAheadAriaLabel,
-      typeAheadAriaDescribedby,
-      clearSelectionsAriaLabel,
-      toggleAriaLabel,
-      removeSelectionAriaLabel,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-describedby': ariaDescribedby,
-      'aria-invalid': ariaInvalid,
-      placeholderText,
-      width,
-      maxHeight,
-      toggleIcon,
-      toggleIndicator,
-      ouiaId,
-      ouiaSafe,
-      hasInlineFilter,
-      isCheckboxSelectionBadgeHidden,
-      inlineFilterPlaceholderText,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      onFilter,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      onTypeaheadInputChanged,
-      onCreateOption,
-      isCreatable,
-      onToggle,
-      createText,
-      noResultsFoundText,
-      customBadgeText,
-      inputIdPrefix,
-      inputAutoComplete,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      isInputValuePersisted,
-      isInputFilterPersisted,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      menuAppendTo,
-      favorites,
-      onFavorite,
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      favoritesLabel,
-      footer,
-      loadingVariant,
-      isCreateSelectOptionObject,
-      isCreateOptionOnTop,
-      shouldResetOnSelect,
-      isFlipEnabled,
-      zIndex,
-      ...props
-    } = this.props;
-    const {
-      focusFirstOption: openedOnEnter,
-      typeaheadCurrIndex,
-      typeaheadInputValue,
-      typeaheadFilteredChildren,
-      favoritesGroup
-    } = this.state;
-    const selectToggleId = toggleId || `pf-select-toggle-id-${currentId++}`;
-    const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
-    // Find out if the selected option is a placeholder
-    const selectedOption = React.Children.toArray(children).find(
-      (option: any) => option.props.value === selections[0]
-    ) as any;
-    const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
-    const hasAnySelections = Boolean(selections[0] && selections[0] !== '');
-    const typeaheadActiveChild = this.getTypeaheadActiveChild(typeaheadCurrIndex);
-    let childPlaceholderText = null as string;
-
-    // If onFavorites is set,  add isFavorite prop to children and add a Favorites group to the SelectMenu
-    let renderableItems: React.ReactNode[] = [];
-    if (onFavorite) {
-      // if variant is type-ahead call the extendTypeaheadChildren before adding favorites
-      let tempExtendedChildren: (React.ReactElement | React.ReactNode | {})[] = children;
-      if (variant === 'typeahead' || variant === 'typeaheadmulti') {
-        tempExtendedChildren = this.extendTypeaheadChildren(typeaheadCurrIndex, favoritesGroup);
-      } else if (onFavorite) {
-        tempExtendedChildren = favoritesGroup.concat(children);
-      }
-      // mark items that are favorited with isFavorite
-      renderableItems = extendItemsWithFavorite(tempExtendedChildren, isGrouped, favorites);
-    } else {
-      renderableItems = children;
-    }
+    };
 
-    if (!customContent) {
-      if (!hasAnySelections && !placeholderText) {
-        const childPlaceholder = React.Children.toArray(children).filter(
-          (child: React.ReactNode) => (child as React.ReactElement).props.isPlaceholder === true
-        );
-        childPlaceholderText =
-          (childPlaceholder[0] && this.getDisplay((childPlaceholder[0] as React.ReactElement).props.value, 'node')) ||
-          (children[0] && this.getDisplay(children[0].props.value, 'node'));
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
       }
-    }
 
-    if (isOpen) {
-      if (renderableItems.find(item => (item as any)?.key === 'loading') === undefined) {
-        if (loadingVariant === 'spinner') {
-          renderableItems.push(
-            <SelectOption isLoading key="loading" value="loading">
-              <Spinner size="lg" />
-            </SelectOption>
-          );
-        } else if (loadingVariant?.text) {
-          renderableItems.push(
-            <SelectOption
-              isLoad
-              key="loading"
-              value={loadingVariant.text}
-              setViewMoreNextIndex={this.setVieMoreNextIndex}
-              onClick={loadingVariant?.onClick}
-            />
-          );
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
         }
       }
-    }
-
-    const hasOnClear = onClear !== Select.defaultProps.onClear;
-    const clearBtn = (
-      <button
-        className={css(buttonStyles.button, buttonStyles.modifiers.plain, styles.selectToggleClear)}
-        onClick={e => {
-          this.clearSelection(e);
-          onClear(e);
-          e.stopPropagation();
-        }}
-        aria-label={clearSelectionsAriaLabel}
-        type="button"
-        disabled={isDisabled}
-        ref={this.clearRef}
-        onKeyDown={event => {
-          if (event.key === KeyTypes.Enter) {
-            this.clearRef.current.click();
-          }
-        }}
-      >
-        <TimesCircleIcon aria-hidden />
-      </button>
-    );
-
-    let selectedChips = null as any;
-    if (variant === SelectVariant.typeaheadMulti) {
-      selectedChips = chipGroupComponent ? (
-        chipGroupComponent
-      ) : (
-        <ChipGroup {...chipGroupProps}>
-          {selections &&
-            (selections as string[]).map(item => (
-              <Chip
-                key={item}
-                onClick={(e: React.MouseEvent) => onSelect(e, item)}
-                closeBtnAriaLabel={removeSelectionAriaLabel}
-              >
-                {this.getDisplay(item, 'node')}
-              </Chip>
-            ))}
-        </ChipGroup>
-      );
-    }
-
-    if (hasInlineFilter) {
-      const filterBox = (
-        <React.Fragment>
-          <div key="inline-filter" className={css(styles.selectMenuSearch)}>
-            <input
-              key="inline-filter-input"
-              type="search"
-              className={css(formStyles.formControl, formStyles.modifiers.search)}
-              onChange={this.onChange}
-              placeholder={inlineFilterPlaceholderText}
-              onKeyDown={event => {
-                if (event.key === KeyTypes.ArrowUp) {
-                  this.handleMenuKeys(0, 0, 'up');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowDown) {
-                  this.handleMenuKeys(0, 0, 'down');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowLeft) {
-                  this.handleMenuKeys(0, 0, 'left');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.ArrowRight) {
-                  this.handleMenuKeys(0, 0, 'right');
-                  event.preventDefault();
-                } else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
-                  // tab to footer or close menu if shift key
-                  if (event.shiftKey) {
-                    this.onToggle(false, event);
-                  } else {
-                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
-                    if (tabbableItems.length > 0) {
-                      tabbableItems[0].focus();
-                      event.stopPropagation();
-                      event.preventDefault();
-                    } else {
-                      this.onToggle(false, event);
-                    }
-                  }
-                } else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
-                  // More modal-like experience for checkboxes
-                  // Let SelectOption handle this
-                  if (event.shiftKey) {
-                    this.handleMenuKeys(0, 0, 'up');
-                  } else {
-                    this.handleMenuKeys(0, 0, 'down');
-                  }
-                  event.stopPropagation();
-                  event.preventDefault();
-                }
-              }}
-              ref={this.filterRef}
-              autoComplete={inputAutoComplete}
-            />
-          </div>
-          <Divider key="inline-filter-divider" />
-        </React.Fragment>
-      );
-      renderableItems = [filterBox, ...(typeaheadFilteredChildren as React.ReactElement[])].map((option, index) =>
-        React.cloneElement(option, { key: index })
-      );
-    }
-
-    let variantProps: any;
-    let variantChildren: any;
-    if (customContent) {
-      variantProps = {
-        selected: selections,
-        openedOnEnter,
-        isCustomContent: true
-      };
-      variantChildren = customContent;
-    } else {
-      switch (variant) {
-        case 'single':
-          variantProps = {
-            selected: selections[0],
-            hasInlineFilter,
-            openedOnEnter
-          };
-          variantChildren = renderableItems;
-          break;
-        case 'checkbox':
-          variantProps = {
-            checked: selections,
-            isGrouped,
-            hasInlineFilter,
-            openedOnEnter
-          };
-          variantChildren = renderableItems;
-          break;
-        case 'typeahead':
-          variantProps = {
-            selected: selections[0],
-            openedOnEnter
-          };
-          variantChildren = onFavorite ? renderableItems : this.extendTypeaheadChildren(typeaheadCurrIndex);
-          if (variantChildren.length === 0) {
-            variantChildren.push(<SelectOption isDisabled key={0} value={noResultsFoundText} isNoResultsOption />);
-          }
-          break;
-        case 'typeaheadmulti':
-          variantProps = {
-            selected: selections,
-            openedOnEnter
-          };
-          variantChildren = onFavorite ? renderableItems : this.extendTypeaheadChildren(typeaheadCurrIndex);
-          if (variantChildren.length === 0) {
-            variantChildren.push(<SelectOption isDisabled key={0} value={noResultsFoundText} isNoResultsOption />);
-          }
-          break;
-      }
-    }
-
-    const isStatic = isFlipEnabled && menuAppendTo !== 'inline';
-    const innerMenu = (
-      <SelectMenu
-        className={css(isStatic && styles.modifiers.static)}
-        {...props}
-        isGrouped={isGrouped}
-        selected={selections}
-        {...variantProps}
-        openedOnEnter={openedOnEnter}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-        sendRef={this.sendRef}
-        keyHandler={this.handleMenuKeys}
-        maxHeight={maxHeight}
-        ref={this.menuComponentRef}
-        footer={footer}
-        footerRef={this.footerRef}
-        isLastOptionBeforeFooter={this.isLastOptionBeforeFooter}
-      >
-        {variantChildren}
-      </SelectMenu>
-    );
-
-    const menuContainer = footer ? <div className={css(styles.selectMenu)}> {innerMenu} </div> : innerMenu;
-
-    const popperContainer = (
-      <div
-        className={css(
-          styles.select,
-          isOpen && styles.modifiers.expanded,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning,
-          validated === ValidatedOptions.error && styles.modifiers.invalid,
-          direction === SelectDirection.up && styles.modifiers.top,
-          className
-        )}
-        {...(width && { style: { width } })}
-        {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
-      >
-        {isOpen && menuContainer}
-      </div>
-    );
+    };
 
-    const mainContainer = (
-      <div
-        className={css(
-          styles.select,
-          isOpen && styles.modifiers.expanded,
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning,
-          validated === ValidatedOptions.error && styles.modifiers.invalid,
-          direction === SelectDirection.up && styles.modifiers.top,
-          className
-        )}
-        ref={this.parentRef}
-        {...getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
-        {...(width && { style: { width } })}
-        {...(validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })}
-      >
-        <SelectToggle
-          id={selectToggleId}
-          parentRef={this.parentRef}
-          menuRef={this.menuComponentRef}
-          {...(footer && { footerRef: this.footerRef })}
-          isOpen={isOpen}
-          isPlain={isPlain}
-          hasPlaceholderStyle={
-            hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder)
-          }
-          onToggle={this.onToggle}
-          onEnter={this.onEnter}
-          onClose={this.onClose}
-          onBlur={onBlur}
-          variant={variant}
-          toggleIndicator={toggleIndicator}
-          aria-labelledby={`${ariaLabelledBy || ''} ${selectToggleId}`}
-          aria-label={toggleAriaLabel}
-          {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}
-          handleTypeaheadKeys={this.handleTypeaheadKeys}
-          moveFocusToLastMenuItem={this.moveFocusToLastMenuItem}
-          isDisabled={isDisabled}
-          hasClearButton={hasOnClear}
-          hasFooter={footer !== undefined}
-          onClickTypeaheadToggleButton={this.onClickTypeaheadToggleButton}
-        >
-          {customContent && (
-            <div className={css(styles.selectToggleWrapper)}>
-              {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-              <span className={css(styles.selectToggleText)}>{placeholderText}</span>
-            </div>
-          )}
-          {variant === SelectVariant.single && !customContent && (
-            <React.Fragment>
-              <div className={css(styles.selectToggleWrapper)}>
-                {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <span className={css(styles.selectToggleText)}>
-                  {this.getDisplay(selections[0] as string, 'node') || placeholderText || childPlaceholderText}
-                </span>
-              </div>
-              {hasOnClear && hasAnySelections && clearBtn}
-            </React.Fragment>
-          )}
-          {variant === SelectVariant.checkbox && !customContent && (
-            <React.Fragment>
-              <div className={css(styles.selectToggleWrapper)}>
-                {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <span className={css(styles.selectToggleText)}>{placeholderText}</span>
-                {!isCheckboxSelectionBadgeHidden && hasAnySelections && (
-                  <div className={css(styles.selectToggleBadge)}>
-                    <span className={css(badgeStyles.badge, badgeStyles.modifiers.read)}>
-                      {this.generateSelectedBadge()}
-                    </span>
-                  </div>
-                )}
-              </div>
-              {hasOnClear && hasAnySelections && clearBtn}
-            </React.Fragment>
-          )}
-          {variant === SelectVariant.typeahead && !customContent && (
-            <React.Fragment>
-              <div className={css(styles.selectToggleWrapper)}>
-                {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={
-                    typeaheadInputValue !== null
-                      ? typeaheadInputValue
-                      : this.getDisplay(selections[0] as string, 'text') || ''
-                  }
-                  type="text"
-                  onClick={this.onClick}
-                  onChange={this.onChange}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
-              </div>
-              {hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn}
-            </React.Fragment>
-          )}
-          {variant === SelectVariant.typeaheadMulti && !customContent && (
-            <React.Fragment>
-              <div className={css(styles.selectToggleWrapper)}>
-                {toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
-                {selections && Array.isArray(selections) && selections.length > 0 && selectedChips}
-                <input
-                  className={css(formStyles.formControl, styles.selectToggleTypeahead)}
-                  aria-activedescendant={typeaheadActiveChild && typeaheadActiveChild.id}
-                  id={`${selectToggleId}-select-multi-typeahead-typeahead`}
-                  aria-label={typeAheadAriaLabel}
-                  aria-invalid={validated === ValidatedOptions.error}
-                  {...(typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby })}
-                  placeholder={placeholderText as string}
-                  value={typeaheadInputValue !== null ? typeaheadInputValue : ''}
-                  type="text"
-                  onChange={this.onChange}
-                  onClick={this.onClick}
-                  autoComplete={inputAutoComplete}
-                  disabled={isDisabled}
-                  ref={this.inputRef}
-                />
-              </div>
-              {hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn}
-            </React.Fragment>
-          )}
-          {validated === ValidatedOptions.success && (
-            <span className={css(styles.selectToggleStatusIcon)}>
-              <CheckCircleIcon aria-hidden="true" />
-            </span>
-          )}
-          {validated === ValidatedOptions.error && (
-            <span className={css(styles.selectToggleStatusIcon)}>
-              <ExclamationCircleIcon aria-hidden="true" />
-            </span>
-          )}
-          {validated === ValidatedOptions.warning && (
-            <span className={css(styles.selectToggleStatusIcon)}>
-              <ExclamationTriangleIcon aria-hidden="true" />
-            </span>
-          )}
-        </SelectToggle>
-        {isOpen && menuAppendTo === 'inline' && menuContainer}
-      </div>
-    );
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
 
-    const getParentElement = () => {
-      if (this.parentRef && this.parentRef.current) {
-        return this.parentRef.current.parentElement;
-      }
-      return null;
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
     };
-
-    return (
-      <GenerateId>
-        {randomId => (
-          <SelectContext.Provider
-            value={{
-              onSelect,
-              onFavorite,
-              onClose: this.onClose,
-              variant,
-              inputIdPrefix: inputIdPrefix || randomId,
-              shouldResetOnSelect
-            }}
-          >
-            {menuAppendTo === 'inline' ? (
-              mainContainer
-            ) : (
-              <Popper
-                trigger={mainContainer}
-                popper={popperContainer}
-                direction={direction}
-                appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
-                isVisible={isOpen}
-                zIndex={zIndex}
-              />
-            )}
-          </SelectContext.Provider>
-        )}
-      </GenerateId>
-    );
-  }
-}
+  }, [isOpen, menuRef, onOpenChange]);
+
+  const menu = (
+    <Menu
+      role={role}
+      className={css(className)}
+      ref={menuRef}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
+      isPlain={isPlain}
+      selected={selected}
+      {...getOUIAProps(
+        Select.displayName,
+        props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
+        props.ouiaSafe !== undefined ? props.ouiaSafe : true
+      )}
+      {...props}
+    >
+      <MenuContent>{children}</MenuContent>
+    </Menu>
+  );
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle(toggleRef)}
+        triggerRef={toggleRef}
+        popper={menu}
+        popperRef={menuRef}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+        zIndex={zIndex}
+        {...popperProps}
+      />
+    </div>
+  );
+};
+
+export const Select = React.forwardRef((props: SelectProps, ref: React.Ref<any>) => (
+  <SelectBase innerRef={ref} {...props} />
+));
+
+Select.displayName = 'Select';