How to open Dropdown within Antd React AutoComplete options?

user_10268364 0
Viewed 150

I have an AutoComplete and it has onSearch event. They are working perfectly. Now, I need to add a dropdown to autocomplete options. The problem is that, when I expect to see opening dropdown, still onSearch is working and dropdown options can't be seen. The thing I am trying to do is that, when user click on dropdown I should show dropdown menu. When user click any other part of the option other than dropdown button, then onSearch should work as expected.

This is autocomplete :

<AutoComplete
  dropdownClassName="certain-category-search-dropdown"
  dropdownMatchSelectWidth={500}
  style={{
    width: 250
  }}
  options={options}
  onSelect={onSelect}      
>
  <Input.Search size="large" placeholder="input here" />
</AutoComplete>

This is renderItem function for options, it has dropdown :

const renderItem = (title, count) => ({
  value: title,
  label: (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between"
      }}
    >
      {title}
      <span>
        <Dropdown overlay={menu} trigger={["click"]}>
          <span
            className="ant-dropdown-link"
            onClick={(e) => e.preventDefault()}
          >
            Click me <DownOutlined />
          </span>
        </Dropdown>
        {count}
      </span>
    </div>
  )
});

This is a simulation of my situation. Also it does not have to be dropdown. When if it is a button or sth the scenario is the same. I could not prevent onSelect running on click.

antd reactjs javascript
1 Answers

In my case, I could use 'dropdownRender' props.

dropdownRender={(menu) => 
  <>
    {menu}
    <span
      className="ant-dropdown-link"
      onClick={(e) => e.preventDefault()}
    >
    Click me <DownOutlined />
    </span>
  </>
}
  • items passed by options props shall be rendered in {menu} above.
  • Click me buttons shall not close the dropdown menu.
user_87556480
Related