CODEWITHSUNDEEP
javascriptreactjsantd
ReNinja
ReNinja

Reputation: 573

Prevent the closing of select dropdown on selecting input box

Im using antd select component and using the dropdownRender option to make a customized dropdown. I have an autocomplete component in the dropdown but on click of the input box the select component close. How do I prevent the closing event. My code is in the link https://codesandbox.io/s/busy-chatelet-ps907?file=/index.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Icon, Divider, AutoComplete, Input } from "antd";

const { Option } = Select;
const dataSource = ["Burns Bay Road", "Downing Street", "Wall Street"];

class App extends React.Component {
  state = {
    items: ["jack", "lucy"]
  };
  render() {
    const { items } = this.state;
    return (
      <Select
        style={{ width: 240 }}
        placeholder="custom dropdown render"
        dropdownRender={menu => (
          <div>
            {menu}
            <Divider style={{ margin: "4px 0" }} />
            <div
              style={{ padding: "4px 8px", cursor: "pointer" }}
              onMouseDown={e => e.preventDefault()}
            >
              Locations
              <AutoComplete
                style={{ width: 200 }}
                dataSource={dataSource}
                placeholder="try to type `b`"
                filterOption={(inputValue, option) =>
                  option.props.children
                    .toUpperCase()
                    .indexOf(inputValue.toUpperCase()) !== -1
                }
              >
                <Input
                  suffix={
                    <Icon type="search" className="certain-category-icon" />
                  }
                />
              </AutoComplete>
            </div>
          </div>
        )}
      >
        {items.map(item => (
          <Option key={item}>{item}</Option>
        ))}
      </Select>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

Upvotes: 1

Views: 2970

Answers (1)

gdh
gdh

Reputation: 13682

You are using old version of antd and therefore you are facing the issue of select getting closed.

Upgrade to 4.x version, it should work. Also Icons have changed in new releases so use latest components.

See here working demo - the select is not closing upon clicking & typing in the input

Upvotes: 3

Related Questions