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,
);

Arraign

If you create a live example here: codesandbox.io I’ll try to help you further... – Esplanade

Did you find a fix? – Anabelanabella

Answer 1

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>

Arraign

Answer 2

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/

Esplanade

i'm using it exactly, in "only select" component, it works fine, after each selection dropdown closes, but in (mode="tags") dropdown remains open. – Arraign

@HosseinHajiMali Notice Option Capitalized... Notice it’s being import on const Option = Selected.Option It is a component that has built in functionality... Not the same as lowercase option... – Esplanade

Ok, you changed it and it still doesn’t work as expected? @HosseinHajiMali – Esplanade

Yes, i was trying to make it short, actually i did exactly same as the ant.design example in my project, but i still have the problem. if you check the ant.design example of multiple select dropdown you can see the problem also, dropdown remains open. – Arraign

think of a modal and a multiple select drop down, it opens and where do you have to click to close it? its not user friendly to click on an empty place to close it, it should close automatically after each selection – Arraign

@HosseinHajiMali Since it has built in functionality, you’d have to modify it a bit to fit your use case... See my comment above... – Esplanade

Answer 3

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

Antipathy

this changes the open argument in the state whenever you choose an option or leave the field. @Hossein Haji Mali – Antipathy

Answer 4

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

Reeding