When tabbing and changing focus from and input to a Select component (With the search option activated) you are not able to type

[Sokal21]

Version

2.13.10

Environment

browser version

Reproduction link

https://codepen.io/anon/pen/GOxqow

Steps to reproduce

Click on the first field, then press tab and try to type something.

What is expected?

When tabbing the focus should change to the Select and let you type so you can search between options.

What is actually happening?

When tabbing you are not able to type.

[yesmeck]

You need press Enter or ⬇ to enter search mode.

[yesmeck]

I was thinking this is a bug at first, but after look into the source code, It's more like a intended behavior.

[yesmeck]

I think we can improve this behavior.

[Sokal21]

@yesmeck

I don't know if you are aware but, Select component use rc-select that admits this behavior of letting you type when you tab between field. You can try it in:

http://react-component.github.io/select/

[yesmeck]

@Sokal21 multiple select will let you type, but a single select with search can not type.

[timvandevelde]

http://react-component.github.io/select/examples/combobox.html

I think this is the desired behaviour.

edit: It should not be able to input anything other the select options.
The problem is mainly that you can't type in the react select single, but you can in the native select.

[hugomosh]

Any progress? Same issue here

[yutingzhao1991]

I think should enter search mode when focus.

[ecgan]

Is there a plan to solve this issue?

[yutingzhao1991]

I think should enter search mode when focus.

Hmm... now I realize that this is not a good idea, Select should not open the dropdown automatically when focus.

There are some solutions for discuss:

1. Open the dropdown after keydown.
2. Open the dropdown after keydown and set search text ( but it confusing when you are using a input method editor).
3. Select the related option (just like chrome native select).

[yesmeck]

react-component/select#303

[yesmeck]

If we move the search box into the popup, it won't be an issue.

[ecgan]

@yutingzhao1991 ,

now I realize that this is not a good idea, Select should not open the dropdown automatically when focus.

Why is it "not a good idea"? Could you elaborate please?

[yutingzhao1991]

@ecgan http://react-component.github.io/select/examples/single.html you can try test with the native select. User press tab to focus not represent he want open the dropdown, maybe he just want press tab again to focus next input.

[ecgan]

@yutingzhao1991 ,
In the example you gave, when we tab to focus on the native select, we can straight away type the first character of the options and the native select would automatically select the option for us, without showing the dropdown.

The issue with Ant Design Select component is it doesn't do that; we have to press Enter or the Down arrow to open the dropdown, then only we can type to filter and select the options. It feels less intuitive to me.

Do you think it would be good to make Ant Design Select component to follow the native select behavior? Or am I missing something?

[ecgan]

@afc163 ,
May I know the reason for closing this issue please?

[NathanBP]

Could this issue please be re-opened as it appears to be still present. If this issue has been fixed could this issue be linked to the pull request for it. Alternatively if there is another work around to solve this issue could it please be noted in this issue. @yesmeck @afc163

[jjalonso]

To be honest, i was expecting the standard behaviour:
if you give focus to a input, the typing symbol start blinking.

if you give the focus to a select (showSearch) it do the same...

any hack to get the behaviour at least?

[platinumitpl]

I took me some time to get to this solution.

Simply use autoFocus={true} showAction="focus".

[dhassouni]

I believe what you actually need now is below. showAction requires an array in PropTypes validation

autoFocus={true}
showAction={["focus"]}

[scythargon]

Still does not work for me like this:

                  <Select
                    showSearch
                    style={{width: 200}}
                    placeholder="Add tag"
                    optionFilterProp="children"
                    defaultOpen={true}
                    autoFocus={true}
                    showAction={["focus"]}
                  >

[hbj]

My workaround for a Select that has showSearch set to true (didn't try it for other cases):

function MySelect(props) {
  const wrapperRef = React.useRef<any>(null);

  // Workaround to avoid having the main select container get focus.
  // When we pass tabIndex it's currently being set on the container
  // and the internal input but we want to have only the input get
  // the focus so we remove the container's tabIndex attribute.
  if (wrapperRef.current && wrapperRef.current.firstChild) {
    wrapperRef.current.firstChild.removeAttribute('tabIndex');
  }

  return (
    <div ref={wrapperRef}>
      <Select
        showSearch
        {...props}
      />
    </div>
  );
}