fix(HTL-103087): menu jumps to top of screen (#1485)

common/changes/pcln-menu/fix-HTL-103087-menu-scroll_2024-04-18-15-40.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-menu",
+      "comment": "fix when the menu opens the page scrolls to the top",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-menu"
+}

packages/menu/src/Menu/Menu.stories.jsx

@@ -2,7 +2,7 @@ import { userEvent, within } from '@storybook/testing-library'
 import React, { useState } from 'react'
 import { argTypes, defaultArgs } from './Menu.stories.args'
 import { Bed as BedIcon } from 'pcln-icons'
-import { Box, Button, ButtonChip, Dialog, Divider, Flex, Link, Text } from 'pcln-design-system'
+import { Absolute, Box, Button, ButtonChip, Dialog, Divider, Flex, Link, Text } from 'pcln-design-system'
 import { listItems, currencies } from '../../test/mocks/Menu'
 import Menu from './Menu'
 import MenuItem from '../MenuItem'
@@ -240,3 +240,29 @@ export const WithCustomPlacement = SingleLineTemplate.bind({})
 WithCustomPlacement.args = {
   placement: 'bottom',
 }
+
+export const BelowPageFold = (args) => {
+  const [value, setValue] = useState('one')
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <Text>Scroll down to menu</Text>
+      <Absolute top={'110vh'}>
+        <Menu buttonText='Menu' width={275} {...args} isFloating={false} isOpen={isOpen}>
+          {listItems.map((item, index) => {
+            const selected = value === item.value
+            const onClick = () => setValue(item.value)
+            return (
+              <MenuItem key={index} onClick={onClick} selected={selected}>
+                <Flex flexDirection='column' alignItems='flex-start'>
+                  <Text textStyle='paragraph'>{item.label}</Text>
+                </Flex>
+              </MenuItem>
+            )
+          })}
+        </Menu>
+      </Absolute>
+    </div>
+  )
+}

packages/menu/src/MenuList/MenuList.jsx

@@ -50,7 +50,7 @@ function MenuList({ id, children, color, size, height, handleClose }) {
 
   useEffect(() => {
     setCurrentItemId(currentItemRef.current?.id)
-    currentItemRef.current?.focus()
+    currentItemRef.current?.focus({ preventScroll: true })
   }, [])
 
   const handleKeyDown = useCallback((evt) => {