diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 2b437c18c3b..b8a7b17c4ba 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -74,7 +74,9 @@ const DropdownBase: React.FunctionComponent = ({ // toggle was clicked open via keyboard, focus on first menu item if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) { setTimeout(() => { - const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)'); + const firstElement = menuRef?.current?.querySelector( + 'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])' + ); firstElement && (firstElement as HTMLElement).focus(); }, 0); } diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx index 8f9fdee3c21..853bfd4a252 100644 --- a/packages/react-core/src/components/Menu/MenuItem.tsx +++ b/packages/react-core/src/components/Menu/MenuItem.tsx @@ -46,7 +46,9 @@ export interface MenuItemProps extends Omit, 'onC actions?: React.ReactNode; /** Description of the menu item */ description?: React.ReactNode; - /** Render external link icon */ + /** Render an external link icon on focus or hover, and set the link's + * "target" attribute to a value of "_blank". + */ isExternalLink?: boolean; /** Flag indicating if the option is selected */ isSelected?: boolean; @@ -191,7 +193,7 @@ const MenuItemBase: React.FunctionComponent = ({ if (flyoutVisible) { const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling; const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter( - el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')) + (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')) ); (flyoutItems[0].firstChild as HTMLElement).focus(); } else { @@ -232,7 +234,7 @@ const MenuItemBase: React.FunctionComponent = ({ let drill: (event: React.KeyboardEvent | React.MouseEvent) => void; if (direction) { if (direction === 'down') { - drill = event => + drill = (event) => onDrillIn && onDrillIn( event, @@ -243,7 +245,7 @@ const MenuItemBase: React.FunctionComponent = ({ itemId ); } else { - drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId); + drill = (event) => onDrillOut && onDrillOut(event, parentMenu, itemId); } } let additionalProps = {} as any; @@ -252,7 +254,8 @@ const MenuItemBase: React.FunctionComponent = ({ href: to, 'aria-disabled': isDisabled ? true : null, // prevent invalid 'disabled' attribute on tags - disabled: null + disabled: null, + target: isExternalLink ? '_blank' : null }; } else if (Component === 'button') { additionalProps = { @@ -317,7 +320,7 @@ const MenuItemBase: React.FunctionComponent = ({ {...props} > - {randomId => ( + {(randomId) => ( = ({ icon="favorites" isFavorited={isFavorited} aria-label={isFavorited ? 'starred' : 'not starred'} - onClick={event => onActionClick(event, itemId)} + onClick={(event) => onActionClick(event, itemId)} tabIndex={-1} actionId="fav" /> diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 1e5c7d618b4..06e4eb0f606 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/packages/react-core/src/components/Menu/examples/Menu.md @@ -67,7 +67,7 @@ To trigger an action when a specific item's action icon is selected, pass in the ### With links -Use the `to` property to add a link to a `` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it. +Use the `to` property to add a link to a `` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it, as well as add `target="_blank"` so that the link opens in a new tab or window. ```ts file="MenuWithLinks.tsx"