Deduct if the menu is open in react-select DropdownIndicator handler

user_1498822 0
Viewed 728

I'd need to change the style of the arrow in react-select. I learned it can be done by using the components prop like in the code sample below.

However, the props coming to DropdownIndicator do not seem to provide any information if the menu is opened. I would need to use that information to change the arrow style depending on whether the menu is open or closed.

How could I get that information?

import ReactSelect, { components } from 'react-select';

...

const DropdownIndicator = (props) => {  
  const { isFocused } = props;
  
  // Which prop tells if the menu is open? Certainly isFocused is not the correct one.
  const caretClass = isFocused ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};

return (<ReactSelect
 components={{ DropdownIndicator }}
 placeholder={placeholder}
 value={value}
 onBlur={onBlur}
 name={name}
 ...
/>)
react-select javascript
1 Answers

I think react-select is passing all selectProps in custom components. And there is field called menuIsOpen in selectProps which is used to determine whether dropdown is open or not.

So you can access menuIsOpen by following:-

const DropdownIndicator = (props) => {  
  const { menuIsOpen } = props.selectProps;
  
  // menuIsOpen will tell if dropdown is open or not
  const caretClass = menuIsOpen ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};
user_86655890
Related