Material UI 自动完成下拉定位答案

【问题标题】：Material UI Autocomplete dropdown positioningMaterial UI 自动完成下拉定位
【发布时间】：2021-01-25 09:01:42
【问题描述】：

是否有任何简单的方法来自定义 Material UI 自动完成功能，以便 Popper 下拉菜单可以相对于文本光标定位（类似于 VS Code Intellisense 下拉菜单）？我有一个多行文本字段组件作为输入字段。

代码如下所示：

import React from "react";
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Chip from '@material-ui/core/Chip';
import { Popper } from "@material-ui/core";



const targetingOptions = [
  { label: "(", type: "operator" },
  { label: ")", type: "operator" },
  { label: "OR", type: "operator" },
  { label: "AND", type: "operator" },
  { label: "Test Option 1", type: "option" },
  { label: "Test Option 2", type: "option" },
];


const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& .MuiAutocomplete-inputRoot': {
        alignItems: 'start'
      }
    },
  }),
);




export default () => {
  const classes = useStyles();

  const CustomPopper = function (props) {
    return <Popper {...props} style={{ width: 250, position: 'relative' }} />;
  };
  

  return (
    <div>
        <Autocomplete
        className={classes.root}
        multiple
        id="tags-filled"
        options={targetingOptions.map((option) => option.label)}
        freeSolo
        disableClearable
        PopperComponent={CustomPopper}
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
          ))
        }
        renderInput={(params) => (
          <TextField {...params} variant="outlined" multiline={true} rows={20} />
        )}
      />
    </div>
  );
};

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

材料 ui 的自动完成具有 PopperComponent 属性，您可以使用该属性创建具有所需 placement 属性的自定义 popper。

检查这个：https://github.com/mui-org/material-ui/issues/19376

【讨论】：