Text is not selectable in material ui menu item in react

467 Views Asked by At

I am using MUI menu item in one of the project. I want to copy text from menu item but currently, the text is not selectable. How can I make it selectable so that, first the user can select the text and copy it.

  <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}>
                <MenuItem onClick={(e) => { e.preventDefault() }} >{username}</MenuItem>
                <Divider></Divider>
                <MenuItem onClick={(e) => { e.preventDefault() }} >
                 <div className="menu__uuid">
                 <span style={{fontSize: "12px", fontWeight:"600"}}>UUID</span>
                  <span>{uuid}</span></div></MenuItem>
                <Divider></Divider>
                <MenuItem onClick={(e) => { e.preventDefault() }} >
                 <div className="menu__uuid">
                 <span style={{fontSize: "12px", fontWeight:"600"}}>ORGANIZATION NAME</span>
                  <span>{orgName}</span></div></MenuItem>
                <Divider></Divider>
                <MenuItem onClick={() => { handleClose(); logout(); event('logout_manual', {}) }}>Logout</MenuItem>
  </Menu>

What my problem is when you open menu item from user interface. Whatever the text is displaying on it, the user can select the text and copy it. Right now, When I tried to select text from menu item, it don't let me.

0

There are 0 best solutions below