reactjs - React lose focus of select after click

Question

I am using react antd component library and I am having trouble losing focus of the select after I select an item in the dropdown. I am thinking it needs to call a blur method so it loses focus but Im not sure.

Here is the codesandbox: https://codesandbox.io/s/sizes-antd4103-forked-81i3d

Steps to reproduce,

click the dropdown and select a name item in the dropdown. Then when the dropdown closes, click it again. The dropdown should show but it doesnt. The user needs to select outside of the dropdown then click it again. I need to make it so they can click the selet at any point and it shows the dropdown.

question from:https://stackoverflow.com/questions/65832025/react-lose-focus-of-select-after-click

Answer 1

Because you don't need to use open and also, you have some additional error

dropdownRender={menu => (
          <div>
             {menu}
           </dive>}

the empty tag is frustrating to see, and it is not a good manner.

This is the complete code code

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Button } from "antd";
const { Option } = Select;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

const SelectSizesDemo = () => {
  const [dropdown, setDropdown] = React.useState(false);

  function onChange(value) {
    console.log(`selected ${value}`);
    setDropdown(false);
  }

  function onBlur() {
    console.log("blur");
    setDropdown(false);
  }

  function onFocus() {
    console.log("focus");
    setDropdown(true);
  }

  function onSearch(val) {
    console.log("search:", val);
  }

  const handleClick = () => {
    setDropdown(!dropdown);
  };

  return (
    <>
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="Select a person"
        optionFilterProp="children"
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        onSearch={onSearch}
        filterOption={(input, option) =>
          option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        open={dropdown}
        onDropdownVisibleChange={handleClick}
        dropdownRender={(menu) => (
          <div>
            {menu}
            <Button onClick={handleClick}>Close</Button>
          </div>
        )}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="tom">Tom</Option>
      </Select>
    </>
  );
};

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

Runnable version