Ant Select closes dropdown

问题

I am using Ant Select component inside Dropdown component. Here is my index file which renders Dropdown

const getMenu = filter => (
  <MenuContainer
    ...
  />
);

<Dropdown
  overlay={getMenu(searchFilter)}
  trigger={['click']}
  visible={this.state.search}
  onVisibleChange={val =>
    this.handleDropdownVisibility(val, searchFilter)
  }
>
  ...
</Dropdown>

Here is my MenuContainer which return Select Component inside it

handleSelectChange = val => {
  this.setState({
    selectedValue: val,
  });
};

<Select
   ref="selectBox"
   onChange={this.handleSelectChange}
   style={{ width: '100%' }}
>
  {numberComparision.map((item, i) => {
    return (
     <Option key={i} value={item.id}>
      {item.name}
     </Option>
    );
  })}
</select>

so on clicking select value onVisibleChange fires and closes dropdown

回答1:

In current v3.3.1 there is no API to prevent to close the Dropdown list.

As a solution I can offer this custom component.

Item has a property clickable which indicates will be the droplist closed after click or not. You can set true/false or css name of an element which should not trigger closing drop-list.

回答2:

You are mixing components that are not meant to be mixed here, I believe.

Dropdown expects its overlay to be a menu of some sorts. Or at least something static that does not open yet another dynamic <div> layer.

Select already has a dropdown type behaviour. So your Dropdown opens the Select which opens the Select dropdown, and then they both react to the click event and close.

It is currently not clear from your question and screenshot what you are actually trying to achieve, that could not be achieved using just a Select. You could try clarifying that.

来源：https://stackoverflow.com/questions/49404943/ant-select-closes-dropdown