diff --git a/src/harmony/Drawer/Drawer.module.css b/src/harmony/Drawer/Drawer.module.css index 59599a8b..fc646e40 100644 --- a/src/harmony/Drawer/Drawer.module.css +++ b/src/harmony/Drawer/Drawer.module.css @@ -61,6 +61,7 @@ margin: 0 -20px; padding: 0 20px 20px; overflow: auto; + overscroll-behavior: contain; } .DrawerBodyContent::-webkit-scrollbar { diff --git a/src/harmony/Drawer/Drawer.tsx b/src/harmony/Drawer/Drawer.tsx index 56e70386..eb979971 100644 --- a/src/harmony/Drawer/Drawer.tsx +++ b/src/harmony/Drawer/Drawer.tsx @@ -16,32 +16,6 @@ interface DrawerProps { onClose?: () => void; } -const useFocusedState = (visible?: boolean) => { - const [focused, setFocused] = useState(false); - const onMouseEnter = useCallback(() => { - setFocused(true); - }, []); - - const onMouseLeave = useCallback(() => { - setFocused(false); - }, []); - - useEffect(() => { - if (visible) { - document.body.style.overflow = focused ? 'hidden' : 'unset'; - } - - return () => { - document.body.style.overflow = 'unset'; - }; - }, [visible, focused]); - - return { - onMouseEnter, - onMouseLeave, - }; -}; - const DrawerContext = React.createContext>({ onClose: () => { throw new Error('Not implemented'); @@ -65,10 +39,10 @@ export const Drawer: React.FC> = ({ }) => { const drawerRef = useRef(null); const [opened, setOpened] = useState(false); + const [onESC] = useKeyboard([KeyCode.Escape], () => onClose?.(), { disableGlobalEvent: false, }); - const onFocusState = useFocusedState(visible); const performState = useCallback((condition: boolean, classes: [string, string]) => { if (drawerRef.current == null) { @@ -116,7 +90,6 @@ export const Drawer: React.FC> = ({ })} ref={drawerRef} {...onESC} - {...onFocusState} > {children}