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?