MUI Material Autocomplete组件onBlur失效问题求助

问题原因 #

• Autocomplete组件内部包含输入框、下拉菜单等多个可聚焦元素，焦点会在组件内部元素间转移，不会触发外层组件的onBlur。
• 组件自带的onBlur仅在**整个组件完全失去焦点（如点击页面空白区且下拉菜单已关闭）**时才会触发，触发场景非常有限，这就是你只看到onFocus生效的原因。

解决方案 #

根据你的需求选择对应方案：

方案1：检测输入框失去焦点 #

直接将onBlur绑定到内部的TextField组件上，只要输入框失去焦点就会触发：

<Autocomplete
  onFocus={() => {
    console.log("true");
  }}
  multiple
  id="combo-box-demo"
  options={props.category}
  style={{ margin: '10px', width: '300px' }}
  size='small'
  value={assign}
  getOptionLabel={(option) => option.category}
  onChange={(event, newValue) => setAssign(newValue)}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      label="Category"
      placeholder="Select Category"
      size='small'
      // 绑定输入框的onBlur
      onBlur={() => {
        console.log("false");
      }}
    />
  )}
/>

方案2：检测组件完全失去交互（下拉菜单关闭+输入框失焦） #

使用Autocomplete的onClose事件配合焦点检测，确保组件完全脱离用户交互时触发：

import { useState } from 'react';

// ...

const [isOpen, setIsOpen] = useState(false);

<Autocomplete
  onFocus={() => {
    console.log("true");
    setIsOpen(true);
  }}
  onClose={() => {
    // 延迟检测确保焦点已离开组件
    setTimeout(() => {
      const activeElement = document.activeElement;
      if (!activeElement?.closest('#combo-box-demo')) {
        console.log("false");
        setIsOpen(false);
      }
    }, 100);
  }}
  open={isOpen}
  onOpen={() => setIsOpen(true)}
  multiple
  id="combo-box-demo"
  options={props.category}
  style={{ margin: '10px', width: '300px' }}
  size='small'
  value={assign}
  getOptionLabel={(option) => option.category}
  onChange={(event, newValue) => setAssign(newValue)}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      label="Category"
      placeholder="Select Category"
      size='small'
    />
  )}
/>

内容的提问来源于stack exchange，提问作者Manish Rana