Ant design - How do i auto close select ("tags" or "multiple" mode) dropdown after each selection?

Question

I'm using ant.design select component ("tags" or "multiple" mode) in a page, i want dropdown to be automatically closes after each selection. Now it remains open and i should click on other places in the page to close the dropdown list.

import { Select } from 'antd';

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select mode="multiple" placeholder="Select Countries" size="large" onChange={handleChange}>
    <Option value="country1">Country1</Option>
    <Option value="country2">Country2</Option>
    <Option value="country3">Country3</Option>
    <Option value="country4">Country4</Option>
    <Option value="country5">Country5</Option>
    <Option value="country6">Country6</Option>
</Select>,
  mountNode,
);

Answer 1

How I auto close my antd multiple select component after each selection.

• I created a state openSelect to control the open and close of the dropdown
• Added onDropdownVisibleChange={() => setOpenSelect(true)}
• Added onChange={() => setOpenSelect(false)}

import { useState } from "react";
import { Select } from "antd";

const App = () => {
  const [openSelect, setOpenSelect] = useState(false);

  const options = [
    { value: "country1", label: "Country1" },
    { value: "country2", label: "Country2" },
    { value: "country3", label: "Country3" },
    { value: "country4", label: "Country5" }
  ];
  return (
    <>
      <Select
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Select countries"
        options={options}
        size="large"
        open={openSelect}
        onDropdownVisibleChange={() => setOpenSelect(true)}
        onChange={() => setOpenSelect(false)}
      />
    </>
  );
};
export default App;

I created the solution on CodeSandox. Preview here

Answer 2

import React, { useState } from 'react'
import { Select } from 'antd'

const Option = Select.Option

const SelectComponent = () => {
  const [open, setOpen] = useState('')

  const handleChange = value => {
    console.log(`selected ${value}`)
  }

  return (
    <Select
      showSearch
      mode={'multiple'}
      style={{ width: 200 }}
      placeholder="Select a person"
      optionFilterProp="children"
      open={open}
      onChange={value => {
        handleChange.bind(this, value)
        this.setState({ open: false })
      }}
      onFocus={() => setOpen(true)}
      onBlur={() => setOpen(false)}
      onSearch={() => setOpen(true)}
    >
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="tom">Tom</Option>
    </Select>
  )
}

export default SelectComponent

Answer 3

Simply change first "Select" component to this:

<Select 
      mode="multiple" 
      placeholder="Select Countries"
      size="large" 
      ref={(select) => this.countrySelect = select}
      onChange={()=>{ 
          this.countrySelect.blur()
      }}>
    <Option value="country1">Country1</Option>
    <Option value="country2">Country2</Option>
    <Option value="country3">Country3</Option>
    <Option value="country4">Country4</Option>
    <Option value="country5">Country5</Option>
    <Option value="country6">Country6</Option>
</Select>

Answer 4

From the docs:

import { Select } from 'antd';

const Option = Select.Option;

function handleChange( value ) {
  console.log( `selected ${value}` );
}

<Select defaultValue="lucy" style={ { width: 120 } } onChange={ handleChange }>
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
  <Option value="disabled" disabled>Disabled</Option>
  <Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={ { width: 120 } } disabled>
  <Option value="lucy">Lucy</Option>
</Select>
<Select defaultValue="lucy" style={ { width: 120 } } loading>
    <Option value="lucy">Lucy</Option>
</Select>

Use it's own <Option>

More info: https://ant.design/components/select/