ShadCN中Popover打开时Input失去焦点的问题

使用shadcn的Popover和Input组件时，点击Input打开Popover会导致Input失去焦点，光标移出。

预期行为：
点击Input后Popover正常打开，同时Input保持焦点，光标停留，用户可直接输入无需再次点击。

问题根源是PopoverTrigger的默认行为会在触发时抢占焦点，导致Input失焦。我们可以手动控制Popover的显示状态，结合Input的事件来实现需求：

1. 用useState管理Popover的打开状态
2. 给Input绑定onFocus事件，触发时打开Popover
3. 通过Popover的open属性控制显示，不再依赖PopoverTrigger
4. 补充点击外部关闭Popover的逻辑，保证交互合理性

修改后的代码如下：

"use client";

import { useState, useEffect, useRef } from "react";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent } from "@/components/ui/popover";

export default function Searchbar() {
  const [isOpen, setIsOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);

  // 点击外部区域关闭Popover
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        popoverRef.current && !popoverRef.current.contains(event.target as Node) &&
        inputRef.current && !inputRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div className="w-1/3">
      <Popover open={isOpen} onOpenChange={setIsOpen}>
        <Input
          ref={inputRef}
          onFocus={() => setIsOpen(true)}
          // 输入时保持Popover打开，可选
          onChange={() => setIsOpen(true)}
        />
        <PopoverContent ref={popoverRef}>
          Place content for the popover here.
        </PopoverContent>
      </Popover>
    </div>
  );
}

说明 #

• 手动控制open属性避免了PopoverTrigger的焦点抢占问题，Input在onFocus触发后自然保持焦点
• 点击外部关闭的逻辑确保了组件交互的完整性
• 可选的onChange事件保证用户输入时Popover不会意外关闭

内容的提问来源于stack exchange，提问作者Rayaan R