Added new ref prop for navitem anchors

Author: thatblindgeye

packages/react-core/src/components/Nav/NavItem.tsx

@@ -52,6 +52,8 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** React ref for the anchor element within the nav item. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLLIElement>;
 }
@@ -74,6 +76,7 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
   zIndex = 9999,
   icon,
   innerRef,
+  anchorRef,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
@@ -194,6 +197,7 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
     const preventLinkDefault = preventDefault || !to;
     return (
       <Component
+        ref={anchorRef}
         href={to}
         onClick={(e: any) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
         className={css(
@@ -222,6 +226,7 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
         className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className)
       }),
       tabIndex: child.props.tabIndex || tabIndex,
+      ref: anchorRef,
       children: hasFlyout ? (
         <Fragment>
           {child.props.children}

packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -95,7 +95,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                     itemId={0}
                     isActive={activeItem === 0}
                     icon={<CubeIcon />}
-                    ref={navItem1Ref}
+                    anchorRef={navItem1Ref}
                     aria-label="Link 1"
                   />
                   <NavItem
@@ -106,7 +106,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                     itemId={1}
                     isActive={activeItem === 1}
                     icon={<FolderIcon />}
-                    ref={navItem2Ref}
+                    anchorRef={navItem2Ref}
                     aria-label="Link 2"
                   />
                   <NavItem
@@ -117,7 +117,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                     itemId={2}
                     isActive={activeItem === 2}
                     icon={<CloudIcon />}
-                    ref={navItem3Ref}
+                    anchorRef={navItem3Ref}
                     aria-label="Link 3"
                   />
                   <NavItem
@@ -128,7 +128,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                     itemId={3}
                     isActive={activeItem === 3}
                     icon={<CodeIcon />}
-                    ref={navItem4Ref}
+                    anchorRef={navItem4Ref}
                     aria-label="Link 4"
                   />
                 </NavList>

packages/react-core/src/demos/examples/Page/PageDockedNav.tsx

@@ -111,7 +111,7 @@ export const PageDockedNav: React.FunctionComponent = () => {
                     itemId={0}
                     isActive={activeItem === 0}
                     icon={<CubeIcon />}
-                    ref={navItem1Ref}
+                    anchorRef={navItem1Ref}
                     aria-label="Link 1"
                   />
                   <NavItem
@@ -121,7 +121,7 @@ export const PageDockedNav: React.FunctionComponent = () => {
                     itemId={1}
                     isActive={activeItem === 1}
                     icon={<FolderIcon />}
-                    ref={navItem2Ref}
+                    anchorRef={navItem2Ref}
                     aria-label="Link 2"
                   />
                   <NavItem
@@ -131,7 +131,7 @@ export const PageDockedNav: React.FunctionComponent = () => {
                     itemId={2}
                     isActive={activeItem === 2}
                     icon={<CloudIcon />}
-                    ref={navItem3Ref}
+                    anchorRef={navItem3Ref}
                     aria-label="Link 3"
                   />
                   <NavItem
@@ -141,7 +141,7 @@ export const PageDockedNav: React.FunctionComponent = () => {
                     itemId={3}
                     isActive={activeItem === 3}
                     icon={<CodeIcon />}
-                    ref={navItem4Ref}
+                    anchorRef={navItem4Ref}
                     aria-label="Link 4"
                   />
                 </NavList>