Is there any easy way to customize Material UI Autoplete so it Popper dropdown can be positioned relative to the text cursor (Similar to the VS Code Intellisense dropdown)? I have a multiline Textfield ponent as an input field.

Code looks something like this:

import React from "react";
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Autoplete from "@material-ui/lab/Autoplete";
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: {
      '& .MuiAutoplete-inputRoot': {
        alignItems: 'start'
      }
    },
  }),
);




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

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

  return (
    <div>
        <Autoplete
        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>
  );
};

Is there any easy way to customize Material UI Autoplete so it Popper dropdown can be positioned relative to the text cursor (Similar to the VS Code Intellisense dropdown)? I have a multiline Textfield ponent as an input field.

Code looks something like this:

import React from "react";
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Autoplete from "@material-ui/lab/Autoplete";
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: {
      '& .MuiAutoplete-inputRoot': {
        alignItems: 'start'
      }
    },
  }),
);




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

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

  return (
    <div>
        <Autoplete
        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 Answer 1

Autoplete from material ui has a PopperComponent property which you can use to create a custom popper that has placement property you want.

check this : https://github./mui-org/material-ui/issues/19376