Hey there! I get it—you want your Select component to grab focus automatically when the Popover pops up, but the autoFocus prop isn't working as expected. Let's break down why this happens and fix it.

Why autoFocus Isn't Working #

The issue ties into how Ant Design's Popover handles content rendering. By default, the Popover lazy-loads its content—meaning the Select component doesn't get mounted until the Popover is triggered. Even though you set autoFocus, the timing is off: when the Select finally mounts, the Popover's animation and DOM insertion might not be fully complete, so the focus doesn't register properly. Plus, if you close and re-open the Popover, the content might be cached, and autoFocus only triggers on initial mount.

The Fix: Manual Focus on Popover Open #

We can use the Popover's onVisibleChange callback to manually trigger focus on the Select once the Popover is visible. Here's how to adjust your code:

Step 1: Create a Ref for the Select #

First, add a React ref to reference the Select component:

import React, { useRef } from "react";
// ... rest of imports

export default function App() {
  const selectRef = useRef(null); // Add this ref
  // ... rest of your code
}

Step 2: Update the Popover with onVisibleChange #

Add the onVisibleChange handler to your Popover. When the Popover becomes visible, we'll trigger the Select's focus method (with a small delay to ensure the DOM is ready):

<Popover 
  placement="topLeft" 
  trigger="click" 
  content={content}
  onVisibleChange={(visible) => {
    if (visible) {
      // Wait for Popover animation/render to finish
      setTimeout(() => {
        selectRef.current?.focus();
      }, 100);
    }
  }}
>
  <div>click me</div>
</Popover>

Step 3: Attach the Ref to the Select #

Bind the ref to your Select component:

<Select
  ref={selectRef} // Attach the ref here
  showSearch
  bordered={false}
  onChange={onChange}
  onFocus={onFocus}
  onBlur={onBlur}
  onSearch={onSearch}
  filterOption={(input, option) => option.children.indexOf(input.toLowerCase()) >= 0 }
  defaultValue="options"
  style={{ width: 120 }}
>
  <Option className="btn btn-danger" value="delete">
    option
  </Option>
</Select>

Full Modified Code #

Here's the complete adjusted code:

import React, { useRef } from "react";
import "./styles.css";
import { Select, Popover } from "antd";
const { Option } = Select;

export default function App() {
  const selectRef = useRef(null);

  function ButtonActions() {
    function onChange(value) {
      console.log(value);
    }
    function onBlur() {
      // console.log('blur');
    }
    function onFocus() {
      // console.log('focus');
    }
    function onSearch(val) {
      // console.log('search:', val);
    }
    return (
      <Select
        ref={selectRef}
        showSearch
        bordered={false}
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        onSearch={onSearch}
        filterOption={(input, option) => option.children.indexOf(input.toLowerCase()) >= 0 }
        defaultValue="options"
        style={{ width: 120 }}
      >
        <Option className="btn btn-danger" value="delete">
          option
        </Option>
      </Select>
    );
  }

  const content = (
    <div>
      <ButtonActions />
    </div>
  );

  return (
    <div className="App">
      <Popover 
        placement="topLeft" 
        trigger="click" 
        content={content}
        onVisibleChange={(visible) => {
          if (visible) {
            setTimeout(() => {
              selectRef.current?.focus();
            }, 100);
          }
        }}
      >
        <div>click me</div>
      </Popover>
      <div>don't click</div>
    </div>
  );
}

Why This Works #

• The onVisibleChange callback fires exactly when the Popover becomes visible, so we know the Select component is now mounted in the DOM.
• The small setTimeout gives the Popover's animation time to complete, ensuring the Select is fully rendered before we try to focus it.
• Using a ref lets us directly access the Select's instance methods, including focus(), which Ant Design exposes for its form components.

Give this a try—your Select should now auto-focus as soon as the Popover pops up, no extra clicks needed!

内容的提问来源于stack exchange，提问作者Ali Husham