使用Material UI InputBase输入搜索结果首字母时输入框失焦问题求助

可能的原因及对应修复方法 #

• 搜索结果点击触发默认焦点转移
  点击搜索结果项时，浏览器会自动将焦点转移到被点击元素，导致InputBase失焦。外层div出现黑边框，是因为浏览器默认给获得焦点的元素添加了outline样式，而这个div意外获得了焦点。

  修复方式：在结果项的点击事件中阻止默认行为，并手动让输入框重新聚焦：

  const inputRef = useRef(null);
  
  const handleResultClick = (e, resultData) => {
    // 阻止浏览器默认的焦点转移行为
    e.preventDefault();
    e.stopPropagation();
    
    // 处理业务逻辑，比如把选中结果填入输入框
    inputRef.current.value = resultData.title;
    
    // 强制让输入框重新获得焦点
    inputRef.current.focus();
  };
  
  // InputBase组件绑定ref
  <InputBase ref={inputRef} placeholder="搜索..." />
  

• 外层容器意外获得焦点导致黑边框
  即便阻止了结果项的焦点转移，有时候焦点会冒泡到外层div，触发浏览器默认的:focus outline。可以通过CSS直接移除这个样式：

  .search-wrapper:focus {
    outline: none;
  }
  

  或者在点击事件中额外阻止焦点冒泡，确保容器不会获得焦点。

• 检查InputBase的ref绑定是否正确
  确保你已经通过useRef正确创建并绑定了InputBase的引用，否则无法调用focus()方法重新聚焦。

内容的提问来源于stack exchange，提问作者Suraj Gaire