feat(ui-menu): add prop to focus first element on open

INSTUI-4376

Author: HerrTopi

packages/ui-menu/src/Menu/index.tsx

@@ -82,7 +82,8 @@ class Menu extends Component<MenuProps> {
     shouldFocusTriggerOnClose: true,
     withArrow: true,
     offsetX: 0,
-    offsetY: 0
+    offsetY: 0,
+    focusFirsItemOnOpen: false
   }
 
   static Item = MenuItem
@@ -455,7 +456,8 @@ class Menu extends Component<MenuProps> {
       onMouseOver,
       positionContainerDisplay,
       offsetX,
-      offsetY
+      offsetY,
+      focusFirsItemOnOpen
     } = this.props
 
     return trigger ? (
@@ -500,6 +502,17 @@ class Menu extends Component<MenuProps> {
           onKeyDown: this.handleTriggerKeyDown,
           disabled: (trigger as ReactElement).props.disabled || disabled
         })}
+        defaultFocusElement={
+          focusFirsItemOnOpen
+            ? () => {
+                // TODO: this could be better. Maybe a more precise selector
+                // @ts-expect-error it works
+                return this._popover?._contentElement?.querySelector(
+                  '[class$="menuItem"]'
+                )
+              }
+            : undefined
+        }
       >
         {this.renderMenu()}
       </Popover>

packages/ui-menu/src/Menu/props.ts

@@ -175,6 +175,10 @@ type MenuOwnProps = {
    * Content to render in the label's info region. It is only visible on nested Menus.
    */
   renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
+  /**
+   * If true, when menu opens, the focus will jump to the first menuItem
+   */
+  focusFirsItemOnOpen?: boolean
 }
 
 type PropKeys = keyof MenuOwnProps
@@ -223,7 +227,8 @@ const propTypes: PropValidators<PropKeys> = {
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxHeight: PropTypes.string,
-  renderLabelInfo: PropTypes.node
+  renderLabelInfo: PropTypes.node,
+  focusFirsItemOnOpen: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [