Display context menu while typing into textfield - reactjs

Question

I am trying to implement a context menu that should be displayed while the user is typing into a textfield using the MaterialUI context menu. The idea is to display suggestions in the context menu based on the currently typed in word in the textfield. So the context menu is being shown next to the caret input and should not disturb the user from continue typing.
But the problem is when the menu is displayed the focus is taken from the textfield and the user is unable to continue typing until the menu has been closed.
Is there a way to allow the menu to be shown and still keep the focus on the textfield allowing the user to continue typing?
<Menu
keepMounted
open={contextMenuOpen}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
{ top: caretPositionY, left: caretPositionX}
}
>
<MenuItem onClick={handleClose}>Suggestion1</MenuItem>
<MenuItem onClick={handleClose}>Suggestion2</MenuItem>
<MenuItem onClick={handleClose}>Suggestion3</MenuItem>
<MenuItem onClick={handleClose}>Suggestion4</MenuItem>
</Menu>

Answer 1

If you can't make it work with Material UI Menu, the here is the alternative:-
Demo.js (using simple ul element with package classnames):-
import React, { useState, useEffect } from "react";
import classNames from "classnames";
import { makeStyles } from "#material-ui/core/styles";
import { Button, TextField } from "#material-ui/core";
import "./style.css";
const Demo = () => {
const classes = useStyles();
const [search, setSearch] = useState("");
const [openMenu, setOpenMenu] = useState(false);
const [menuItems, setMenuItems] = useState([
{ id: 1, name: "Profile" },
{ id: 2, name: "My Account" },
{ id: 3, name: "Logout" }
]);
const [menuItemsFiltered, setMenuItemsFiltered] = useState(menuItems);
const handleClose = () => {
setOpenMenu(false);
};
const handleSearch = value => {
if (value === "") {
setOpenMenu(false);
setMenuItemsFiltered(menuItems);
} else {
setOpenMenu(true);
setMenuItemsFiltered(() =>
menuItems.filter(
item => item.name.toLowerCase().indexOf(value.toLowerCase()) > -1
)
);
}
};
useEffect(() => {
handleSearch(search);
}, [search]);
return (
<div className={classes.root}>
<TextField
type="search"
value={search}
onChange={e => setSearch(e.target.value)}
/>
<div>
<Button
aria-controls="simple-menu"
aria-haspopup="true"
onClick={() => setOpenMenu(!openMenu)}
>
Open Menu
</Button>
<ul
className={
openMenu ? classes.menu : classNames(classes.menu, classes.menuHide)
}
>
{menuItemsFiltered.map(item => (
<li
key={item.id}
className={classes.menuItem}
onClick={() => handleClose()}
>
{item.name}
</li>
))}
</ul>
</div>
</div>
);
};
export default Demo;
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
menu: {
listStyle: "none",
padding: "0.5rem",
backgroundColor: theme.palette.grey[100],
"& li:not(:last-child)": {
marginBottom: "1rem"
}
},
menuHide: {
display: "none"
},
menuItem: {
"&:hover": {
cursor: "pointer",
color: theme.palette.primary.main
}
}
}));
You can see the working demo here in sandbox.

Answer 2

Update 2022
https://codesandbox.io/s/react-insert-context-menu-value-into-textarea-rhq5wq?file=/src/App.tsx
Addtional feature is setting cursor after the pasted value
import { Box, Menu, MenuItem, TextField, Typography } from "#mui/material";
import React, { useLayoutEffect } from "react";
import { useRef, useState } from "react";
export default function App() {
const [value, setValue] = useState(
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, nemo. Doloremque eligendi aliquam repellendus reiciendis doloribus excepturi asperiores quaerat corporis."
);
const [selectionEnd, setSelectionEnd] = useState(0);
const textareaRef = useRef();
const [contextMenu, setContextMenu] = React.useState<{
mouseX: number;
mouseY: number;
} | null>(null);
const handleContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
setContextMenu(
contextMenu === null
? {
mouseX: event.clientX + 2,
mouseY: event.clientY - 6
}
: // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
// Other native context menus might behave different.
// With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
null
);
};
const handleClose = () => {
setContextMenu(null);
};
const insertText = (text) => () => {
const selectionStart = textareaRef.current.selectionStart;
const selectionEnd = textareaRef.current.selectionEnd;
const insertText = ` {{${text}}} `;
setSelectionEnd(selectionEnd + insertText.length);
const newValue = `${value.substring(
0,
selectionStart
)}${insertText}${value.substring(selectionEnd, value.length)}`;
setValue(newValue);
handleClose();
};
useLayoutEffect(() => {
//Sets the cursor at the end of inserted text
textareaRef.current.selectionEnd = selectionEnd;
}, [selectionEnd]);
return (
<Box onContextMenu={handleContextMenu}>
<Typography mb={2}>Right click on textarea to add some text</Typography>
<TextField
label="Textarea"
multiline
minRows={10}
inputRef={textareaRef}
value={value}
onChange={({ target }) => setValue(target.value)}
fullWidth
/>
<Menu
open={contextMenu !== null}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
contextMenu !== null
? { top: contextMenu.mouseY, left: contextMenu.mouseX }
: undefined
}
>
<MenuItem onClick={insertText("VarA")}>VarA</MenuItem>
<MenuItem onClick={insertText("VarB")}>VarB</MenuItem>
</Menu>
</Box>
);
}