How do I set autofocus to an input that's inside a select dropdown?

Question

I have an input field inside a select dropdown. I need to focus on that input box as soon as the dropdown is shown when the user clicks on it. I tried using refs, but that doesn't seem to work. I'm using antd 3.26.14 and React 16.8.6. Here is the code:

<Select
  labelInValue
  open={isOpenSelectCategory}
  onDropdownVisibleChange={onDropdownVisibleChange}
  placeholder="Select Category"
  onChange={() => {
    searchDropdownOptions('formCategories', '');
    setCategoryInputValue('');
  }}
  notFoundContent={null}
  dropdownRender={menu => (
                      <>
      <div
        onMouseDown={lockSelectCategoryClose}
        onMouseUp={lockSelectCategoryClose}
        style={{ marginBottom: '10px' }}
      >
        <Input
          value={categoryInputValue}
          ref={inputRef}
          onChange={event => {
            searchDropdownOptions(
              'formCategories',
              event.target.value,
            );
            setCategoryInputValue(event.target.value);
          }}
          placeholder="Search category or create new one"
        />
...

The useEffect for the Input ref:

useEffect(() => {
  if (inputRef.current) inputRef.current.focus();
}, [inputRef]);

I've tried variations of the above useEffect, where instead of listening to changes on inputRef, I've listened to the change when the dropdown gets loaded. Neither of them worked though.

Any help here will be much appreciated...

Answer 1

Try to use ref={(input) => input && input.focus()} in combination with autofocus property e.g.:

<Input
    autofocus
    ref={(input) => input && input.focus()}
...
/>

Here is a working stackblitz for a react class component.

NOTE: The issue with this solution is that it focuses input on any re-render (which might not be desired).

See also how-to-set-focus-on-an-input-field-after-rendering for more options.

Code for the linked complete example:

import React, { useFocus } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Select, Divider, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const { Option } = Select;

let index = 0;

class App extends React.Component {
  state = {
    items: ['jack', 'lucy'],
    name: '',
  };

  onNameChange = (event) => {
    this.setState({
      name: event.target.value,
    });
  };

  addItem = () => {
    console.log('addItem');
    const { items, name } = this.state;
    this.setState({
      items: [...items, name || `New item ${index++}`],
      name: '',
    });
  };

  render() {
    // const [inputRef, setInputFocus] = useFocus();
    const { items, name } = this.state;
    return (
      <Select
        style={{ width: 240 }}
        placeholder="custom dropdown render"
        dropdownRender={(menu) => (
          <div>
            {menu}
            <Divider style={{ margin: '4px 0' }} />
            <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
              <Input
                autofocus
                ref={(input) => input && input.focus()}
                style={{ flex: 'auto' }}
                value={name}
                onChange={this.onNameChange}
              />
              <a
                style={{
                  flex: 'none',
                  padding: '8px',
                  display: 'block',
                  cursor: 'pointer',
                }}
                onClick={this.addItem}
              >
                <PlusOutlined /> Add item
              </a>
            </div>
          </div>
        )}
      >
        {items.map((item) => (
          <Option key={item}>{item}</Option>
        ))}
      </Select>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));