CODEWITHSUNDEEP
reactjsdrop-down-menuhtml-selectantd
atif
atif

Reputation: 769

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 Select box inside dropdown

Upvotes: 1

Views: 12313

Answers (3)

ifrit1611
ifrit1611

Reputation: 11

Change Menu.Item where the select is contained to a Menu.ItemGroup, those do not trigger the onVisibleChange when clicked.

Upvotes: 1

sultan
sultan

Reputation: 4729

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.

enter image description here

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.

Upvotes: 1

Jesper We
Jesper We

Reputation: 6097

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.

Upvotes: 0

Related Questions