如何实现Material UI Autocomplete从按钮触发下拉选择菜单

要实现点击按钮弹出Material UI Autocomplete下拉菜单，同时关闭状态下以按钮形式展示，核心是正确处理inputRef传递和手动控制下拉菜单的展开状态，以下是可行的实现方案：

import React, { useState } from "react";
import Autocomplete from "@mui/material/Autocomplete";
import Button from "@mui/material/Button";

const autoOptions = [
  "pineapple",
  "strawberry",
  "mango",
  "banana",
  "watermelon",
  "grape",
  "peach",
  "kiwi",
  "apple"
];

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Autocomplete
        id="combo-box-demo"
        options={autoOptions}
        sx={{ width: 300 }}
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        renderInput={(params) => (
          <Button
            variant="contained"
            onClick={() => setOpen(!open)}
            {...params}
          >
            Pick a fruit!
          </Button>
        )}
        popupProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          }
        }}
      />
    </div>
  );
}

关键说明 #

• 传递inputRef：通过{...params}将Autocomplete需要的inputRef等属性传递给Button，这是解决inputRef相关错误的核心——Autocomplete依赖这个ref关联触发元素，必须正确传递。
• 手动控制展开状态：用useState维护open状态，点击按钮时切换状态，同时绑定Autocomplete的open、onOpen、onClose属性，确保菜单展开/关闭状态同步。
• 菜单定位：通过popupProps的anchorOrigin和transformOrigin配置，让下拉菜单精准从按钮底部左侧弹出，匹配布局需求。
• 替换为Button组件：直接使用Material UI的Button替代原生input，既满足样式需求，也能更好地和Autocomplete组件兼容。

如果需要自定义按钮样式，只需修改Button的variant、sx等属性即可，不会影响下拉菜单的功能。

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