Dropdown Not Keyboard Interactive When Non-Searchable/Input Not Focusable

[jermainemercado]

import PropTypes from 'prop-types';
import {ChevronUp, ChevronDown} from '../../assets/icons/Icons';
import Select from 'react-select';
import Styles from './floatingdropdown.module.scss';

const FloatingDropdownStyles = {
  indicatorSeparator: styles => ({...styles, display: 'none'}),
  control: () => ({visibility: 'hidden'}),
  menu: styles => ({
    ...styles,
    width: 'auto',
    border: '1px solid black',
    boxShadow: 'none',
  }),
  option: () => ({
    //Option styled with scss.
  }),
};

const FloatingDropdown = props => {
  const {options, disabled, label, id, onChange, ...otherProps} = props;
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState(null);
  const containerRef = useRef();

  const onSelectChange = value => {
    setIsOpen(!isOpen);
    setValue(value);
    onChange(value);
  };

  /* If dropdown is open and user clicks outside of dropdown container, close dropdown. */
  const handleClickOutside = e => {
    if (containerRef.current && !containerRef.current.contains(e.target) && isOpen) {
      setIsOpen(!isOpen);
    }
  };

  useEffect(() => {
    window.addEventListener('mousedown', handleClickOutside);
    return () => window.removeEventListener('mousedown', handleClickOutside);
  },[isOpen]);

  return (
    <Container
      ref={containerRef}
      isOpen={isOpen}
      onClose={() => setIsOpen(!isOpen)}
      target={
        <Control
          isOpen={isOpen}
          onClick={() => setIsOpen(!isOpen)}
          disabled={disabled}
        >
          {value ? value.label : label}
        </Control>
      }
    >
      <Select
        autoFocus
        backspaceRemovesValue={false}
        components={{DropdownIndicator: null, IndicatorSeparator: null, Option}}
        controlShouldRenderValue={false}
        hideSelectedOptions={false}
        isClearable={false}
        menuIsOpen
        onChange={onSelectChange}
        options={options}
        placeholder=''
        styles={FloatingDropdownStyles}
        tabSelectsValue={false}
        value={value}
      />
    </Container>
  );
};

const Option = props => {
  const {innerProps, innerRef, isSelected, isFocused, children, ...otherProps} = props;

  return (
    <div ref={innerRef} {...innerProps} className={isSelected ? Styles['option__background--selected'] : Styles['option__background']}>
      <div className={`${Styles['option']} ${isSelected ? Styles['option--selected'] : ''} ${isFocused ? Styles['option--focused'] : ''}`}>
        {children}
      </div>
    </div>
  );
};

const Control = props => {
  const {children, isOpen, onClick, disabled} = props;

  return (
    <button
      disabled={disabled}
      onClick={disabled ? () => {} : onClick}
      className={`${Styles['floating-dropdown__control']} 
      ${disabled ? Styles['floating-dropdown__control--disabled'] : ''}`}
    >
      {children}
      {isOpen ? ChevronUp : ChevronDown}
    </button>
  );
};

// eslint-disable-next-line react/display-name
const Container = forwardRef(({children, isOpen, target}, ref) =>
<div ref={ref} className={Styles['container']}>
    {target}
    {isOpen ? <div>{children}</div> : null}
  </div>
);
export default FloatingDropdown;

Attempting to create a Popout Dropdown similar to the documentation examples, having difficulty where if not searchable, or the input is not able to be focused, then the user cannot select an option and navigate through the menu with the keyboard. When using a generic component, everything seems to work outside of the box, unsure what modifications I have made that interfere with the keyboard interactivity, any help would be appreciated. Thanks :) Keyboard interactive when <Select isSearchable={true}/> https://user-images.githubusercontent.com/25373146/163410822-06a346b7-f8f3-4e3f-94d9-25485a7172e5.mov Keyboard interactivity is broken when Input is not visible, or not focusable, or does not exist entirely. https://user-images.githubusercontent.com/25373146/163411124-baacd7d7-316c-43e5-a846-85929658dc9e.mov