diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js index 15342819d76647..a5a288c7874702 100644 --- a/packages/mui-material/src/Menu/Menu.js +++ b/packages/mui-material/src/Menu/Menu.js @@ -7,6 +7,7 @@ import composeClasses from '@mui/utils/composeClasses'; import HTMLElementType from '@mui/utils/HTMLElementType'; import { useRtl } from '@mui/system/RtlProvider'; import useSlotProps from '@mui/utils/useSlotProps'; +import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import MenuList from '../MenuList'; import Popover, { PopoverPaper } from '../Popover'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; @@ -106,6 +107,21 @@ const Menu = React.forwardRef(function Menu(inProps, ref) { const menuListActionsRef = React.useRef(null); + useEnhancedEffect(() => { + if (open) { + const selection = document.getSelection(); + + if (selection && selection.rangeCount > 0) { + const range = selection.getRangeAt(0); + + setTimeout(() => { + // Restore the selection before focusing, to not affect the text selection on Safari and Firefox. + selection.addRange(range); + }); + } + } + }, [open]); + const handleEntering = (element, isAppearing) => { if (menuListActionsRef.current) { menuListActionsRef.current.adjustStyleForScrollbar(element, { diff --git a/packages/mui-material/src/MenuList/MenuList.js b/packages/mui-material/src/MenuList/MenuList.js index 6774b003ad9f00..9e9aced122cb9b 100644 --- a/packages/mui-material/src/MenuList/MenuList.js +++ b/packages/mui-material/src/MenuList/MenuList.js @@ -81,6 +81,16 @@ function moveFocus( // Move to the next element. nextFocus = traversalFunction(list, nextFocus, disableListWrap); } else { + const selection = document.getSelection(); + if (selection && selection.rangeCount > 0) { + const range = selection.getRangeAt(0); + + setTimeout(() => { + // Restore the selection before focusing, to not affect the text selection on Safari and Firefox. + selection.addRange(range); + }); + } + nextFocus.focus(); return true; }