Show Material UI menu on text selection

show-popup-on-selection.md

import React from 'react';
import Menu from '@material-ui/core/Menu';
import RootRef from '@material-ui/core/RootRef';
import Typography from '@material-ui/core/Typography';

class MyComponent extends React.Component {
  componentDidMount() {
    document.addEventListener('selectionchange', this.handleSelect);
  }

  componentWillUnmount() {
    document.removeEventListener('selectionchange', this.handleSelect);
  }

  state = { anchorEl: null };
  text = React.createRef();
  
  handleSelect = () => {
    const sel = window.getSelection();
    const { current: el } = this.text;

    if (!sel.toString()) return;

    // Check if the selection is made on the target (text) node
    if (sel.anchorNode.parentNode === el || sel.focusNode.parentNode === el) {
      this.setState({ anchorEl: el });
    }
  };

  closeMenu = () => {
    this.setState({ anchorEl: null }):
  };
  
  render() {
    return (
      <div>
        <Typography variant="title">Example</Typography>
        <RootRef rootRef={this.text}>
          <Typography variant="body1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </Typography>
        </RootRef>
        <Menu
          anchorEl={this.state.anchorEl}
          open={Boolean(this.state.anchorEl)}
          onClose={this.closeMenu}
        >
          OK OK OK
        </Menu>
      </div>
    );
  }
}

References

• https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange
• https://material-ui.com/demos/menus/
• https://material-ui.com/api/root-ref/