How can I open a Material UI Menu open anchored to a div?

Viewed 50

I don't want to have the menu respond to a button. I want it to be ever present. I'm trying:

import React, { useState, createRef } from 'react';
import { Box, Menu, MenuItem } from '@material-ui/core';

const DEFAULT_ELEVATION = 2;

interface ITypeSelector {
  title: string;
  description: string;
  documentId: string;
  selected?: boolean;
  disabled: boolean;
}

export default function Prediction({
  title,
  description,
  documentId,
  selected,
  disabled
}: ITypeSelector) {
  const boxEl = createRef<HTMLElement>()

  const predictions = ['a', 'b', 'c']

  return (
    <span ref={boxEl}>
      <Menu
        id="simple-menu"
        anchorEl={boxEl}
        keepMounted
        open={true}
      // onClose={handleClose}
      >
        {predictions.map((prediction, idx) => <MenuItem key={idx}>{prediction}</MenuItem>)}
      </Menu>
    </span>
  );
}

But the menu is hanging out in the top left (not below or in the span as I would like).

What am I doing wrong?

0 Answers
Related