React MUI 问题 - 单击 InputAdornment 不会打开弹出窗口

Question

我在 country example 中使用自动完成组件，但使用 InputAdornment 组件装饰以显示 select 的标志国家。

这里是工作代码：

问题：选择国家后，如果用户点击正好旗帜，国家名称是select编辑。而且，如果用户点击自动完成的剩余部分，Popper 就会出现（正如预期的那样，这完全没问题）。

当前行为：

我的目标：我想 即使在点击标志时也能打开自动完成 Popper。

预期行为：

我尝试在 InputAdornment 参数中使用选项 disablePointerEvents，但没有任何改变。我在一个纯 Textfield MUI 组件上尝试了同样的方法并且它起作用了，所以它可能只与自动完成有关。

这个问题有解决方法吗？

同样的问题here

Answer 1

一个解决方案是使用 open、onOpen 和 onClose 道具控制 Autocomplete 的 open 状态，然后添加一个 onClick（而不是 disablePointerEvents）到 InputAdornment 打开 Autocomplete.

这是一个基于您的沙箱的工作示例：

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import InputAdornment from "@mui/material/InputAdornment";

export default function CountrySelect() {
  const [value, setValue] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  return (
    <Autocomplete
      id="country-select-demo"
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      sx={{ width: 300 }}
      options={countries}
      autoHighlight
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      getOptionLabel={(option) => option.label}
      renderOption={(props, option) => (
        <Box
          component="li"
          sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
          {...props}
        >
          <img
            loading="lazy"
            width="20"
            src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
            srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
            alt=""
          />
          {option.label} ({option.code}) +{option.phone}
        </Box>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps,
            autoComplete: "new-password" // disable autocomplete and autofill
          }}
          InputProps={{
            ...params.InputProps,
            startAdornment: value ? (
              <InputAdornment position="start" onClick={() => setOpen(true)}>
                <img
                  loading="lazy"
                  width="48"
                  src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`}
                  srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`}
                  alt=""
                />
              </InputAdornment>
            ) : null
          }}
        />
      )}
    />
  );
}

React MUI 问题 - 单击 InputAdornment 不会打开弹出窗口

React MUI Issue - Clicking on InputAdornment doesn't open the Popup

reactjs

material-ui