Can the Material UI Autocomplete be customized easily to position the Popper dropdown relative to the text cursor, similar to the VS Code Intellisense dropdown? The input field is a multiline Textfield component.
The code snippet below demonstrates:
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>
);
};