Disabling the component doesn't close the menu

[gabrielenosso]

Passing the "disabled={true}", doesn't close the menu.
It means that if you update then the component with "disabled={false}", the component is bugged: it doesn't close properly because the state.isOpen is still false (even though the menu is rendered).

So the closeMenu() method at https://github.com/JedWatson/react-select/blob/master/src/Select.js#L247 isn't invoked.

[jsnmoon]

Having the menu close once the component is disabled makes sense, although that's not currently happening here on 1.0.0-beta-13. Could a collaborator comment on this issue?

EDIT: I'm currently using the following CSS as a hack to get around this issue.

.Select.is-disabled .Select-menu-outer {
  display: none;
  pointer-events: none;
}

[manvydasu]

@Rall3n
Seems like this issue appeared again..

[lijovijayan]

@Rall3n
Seems like this issue appeared again..

yes, i'm also facing the same issue.

[lijovijayan]

@Rall3n
Seems like this issue appeared again..

yes, i'm also facing the same issue.

Here is what i have done to solve it temporarily

const DropdownIndicator = (props: any) => {
  return (
    <components.DropdownIndicator {...props}>
      { props.selectProps.menuIsOpen && !props.selectProps.isDisabled
        ? <UpOutlined style={{ fontSize: 10, color: "#262626" }} /> :
        <DownOutlined style={{ fontSize: 10, color: "#262626" }} />}
    </components.DropdownIndicator>
  );
};
const ClearIndicator = (props: any) => {
  return (
    <components.ClearIndicator {...props}>
      <CloseOutlined style={{ fontSize: 9, color: "#262626" }} />
    </components.ClearIndicator>
  );
};
const Menu = (props: any) => {
  return props.selectProps.isDisabled ? <div /> : <components.Menu {...props} />
}

const SelectWrapper = (props: any) => {
	return <Select
		{ ...props }
		 components={{ DropdownIndicator, Menu }}
	/>
}

[ebonow]

Greetings,

There is another issue #4255 that is currently open that has a PR #4329 and has been scheduled for v3.2.

We are working with Jed to establish when that exact date is. The code suggested above for the Menu component should work to ensure the menu is not shown when the Select is disabled.