Select maxTagCount="responsive" causes onBlur not triggered at the 1st time

[igelar]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Select组件设置maxTagCount="responsive"后，第一次选中某项并点击其他地方，无法触发onBlur事件

Reproduction link

Steps to reproduce

choose on tag -> click on other place

What is expected?

"onBlur" prints

What is actually happening?

nothing prints

Environment	Info
antd	4.15.3
React	17.0.2
System	windows
Browser	chrome84

---

there may be many Select stay focused

[eduardodallmannAmbev]

Same problem here. In the first blur the select is keeping the className ant-select-focused

[Harukisatoh]

Same here. And if you focus on Select and then click on another focusable component, both will stay focused

[xuCesar]

Same problem. After the first selected, the focus has been lost.

[github-actions[bot]]

Hello @igelar. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @igelar, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[afc163]

Wrong codesandbox?

[eduardodallmannAmbev]

Below is the link to reproduce the problem

Sanbox

When select have property maxTagCount="responsive" is needed click in and out two times to fire onblur

[github-actions[bot]]

Hello @igelar. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @igelar，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[1xiyu]

The same thing happened when using cascader multiple mode

[mleister97]

Any updates on this???

[mleister97]

See reproduction here:

https://codesandbox.io/s/9q1nk?file=/index.js

Change line 17 to:

const [value, setValue] = React.useState([]);

[philipfabianek]

I was able to temporarily fix it using custom className and onDropdownVisibleChange handler like this:

<Select
  mode="multiple"
  maxTagCount="responsive"
  className="select-to-blur"
  onDropdownVisibleChange={(visible) => {
    if (!visible) {
      const elements = document.getElementsByClassName("select-to-blur");
      for (let element of elements) {
        element.classList.remove("ant-select-focused");
      }
    }
  }}
/>

This code manually removes the ant-select-focused class from the select (actually all selects with the class) when select Dropdown gets hidden.

Furthermore, if your select is also clearable, this can be solved as follows:

const removeFocusedClass = () => {
  const elements = document.getElementsByClassName("select-to-blur");
  for (let element of elements) {
    element.classList.remove("ant-select-focused");
  }
}

return (
  <Select
    mode="multiple"
    maxTagCount="responsive"
    className="select-to-blur"
    onDropdownVisibleChange={(visible) => {
      if (!visible) {
        removeFocusedClass();
      }
    }}
    onClear={() => removeFocusedClass()}
  />
);

[AILOVEU]

该问题产生的原因是rc-overflow库中的这部分代码

  const isResponsive = data.length && maxCount === RESPONSIVE;
  if (isResponsive) {
      overflowNode = (
        <ResizeObserver onResize={onOverflowResize}>
          {overflowNode}
        </ResizeObserver>
      );
  }
  return overflowNode;

选中项的长度从无到有或从有到无变化时，导致rc-select传入的Input组件被销毁重建，从而失焦

解决办法：

1. 删除data.length的判断，但我对这个代码的作用还没有评估，只是尝试去掉后可以聚焦

const isResponsive = maxCount === RESPONSIVE; 

2. rc-relect库中对于values的变化进行处理。从无到有或从有到无变化时，都重新对inputRef进行聚焦，缺点是所有用到rc-overflow这段代码的组件都要进行处理。

  const lastValuesRef = React.useRef<DisplayValueType[]>(values)

  React.useEffect(()=>{
    if((lastValuesRef.current.length === 0  || values.length === 0) 
    && (lastValuesRef.current.length !== values.length)){
      setTimeout(()=>{
        inputRef.current.focus();
      })
    }
    lastValuesRef.current=values
  },[inputRef, values])

@afc163

[afc163]

解法 2 有点脏，我倾向试试解法 1 。

[songyot11]

Any updates on this?