@patternfly/react-core 6.0.0-alpha.55 → 6.0.0-alpha.57

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.54","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.56","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.54","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.56","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.54","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.56","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.55",
+  "version": "6.0.0-alpha.57",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "9500bdfebf53ce5f486c92eaa0b1a371dccf4d76"
+  "gitHead": "b2e46fefe688b2809ccf36e1ca575867a0c82a78"
 }

package/src/components/Button/examples/ButtonInlineSpanLink.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, KeyTypes } from '@patternfly/react-core';
 
 const handleKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
   const { key } = event;
-  const isEnterKey: boolean = key === 'Enter';
-  const isEnterOrSpaceKey: boolean = isEnterKey || key === 'Space';
+  const isEnterKey: boolean = key === KeyTypes.Enter;
+  const isEnterOrSpaceKey: boolean = isEnterKey || key === KeyTypes.Space;
 
   if (isEnterOrSpaceKey) {
     event.preventDefault();

package/src/components/Form/FormGroupLabelHelp.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, ButtonProps } from '../Button';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import { KeyTypes } from '../../helpers/constants';
 
 /** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
  * to our Popover component.
@@ -10,15 +11,48 @@ export interface FormGroupLabelHelpProps extends ButtonProps {
   'aria-label': string;
   /** Additional classes added to the help button. */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLSpanElement>;
 }
 
-export const FormGroupLabelHelp: React.FunctionComponent<FormGroupLabelHelpProps> = ({
+const FormGroupLabelHelpBase: React.FunctionComponent<FormGroupLabelHelpProps> = ({
   'aria-label': ariaLabel,
   className,
+  innerRef,
   ...props
-}) => (
-  <Button aria-label={ariaLabel} className={className} variant="plain" hasNoPadding {...props}>
-    <QuestionCircleIcon />
-  </Button>
-);
+}) => {
+  const ref = React.useRef<HTMLSpanElement>(null);
+  const buttonRef = innerRef || ref;
+
+  const isMutableRef = (ref: React.Ref<HTMLSpanElement>): ref is React.MutableRefObject<HTMLSpanElement> =>
+    typeof ref === 'object' && ref !== null && 'current' in ref && ref.current !== undefined;
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if ([KeyTypes.Space, KeyTypes.Enter].includes(event.key) && isMutableRef(buttonRef) && buttonRef.current) {
+      event.preventDefault();
+      buttonRef.current.click();
+    }
+  };
+
+  return (
+    <Button
+      component="span"
+      isInline
+      ref={buttonRef}
+      onKeyDown={handleKeyDown}
+      aria-label={ariaLabel}
+      className={className}
+      variant="plain"
+      hasNoPadding
+      {...props}
+    >
+      <QuestionCircleIcon />
+    </Button>
+  );
+};
+
+export const FormGroupLabelHelp = React.forwardRef((props: FormGroupLabelHelpProps, ref: React.Ref<any>) => (
+  <FormGroupLabelHelpBase innerRef={ref} {...props} />
+));
+
 FormGroupLabelHelp.displayName = 'FormGroupLabelHelp';

package/src/components/Form/examples/FormBasic.tsx

@@ -18,6 +18,7 @@ export const FormBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
+  const labelHelpRef = React.useRef(null);
 
   const handleNameChange = (_event, name: string) => {
     setName(name);
@@ -37,6 +38,7 @@ export const FormBasic: React.FunctionComponent = () => {
         label="Full name"
         labelHelp={
           <Popover
+            triggerRef={labelHelpRef}
             headerContent={
               <div>
                 The{' '}
@@ -63,7 +65,7 @@ export const FormBasic: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" />
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -12,6 +12,7 @@ import {
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
+  const labelHelpRef = React.useRef(null);
 
   const handleNameChange = (_event, name: string) => {
     setName(name);
@@ -24,6 +25,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
         labelInfo="Additional label info"
         labelHelp={
           <Popover
+            triggerRef={labelHelpRef}
             headerContent={
               <div>
                 The{' '}
@@ -50,7 +52,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" />
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -18,6 +18,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
+  const labelHelpRef = React.useRef(null);
 
   const handleNameChange = (_event, name: string) => {
     setName(name);
@@ -37,6 +38,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
         label="Full name"
         labelHelp={
           <Popover
+            triggerRef={labelHelpRef}
             headerContent={
               <div>
                 The{' '}
@@ -63,7 +65,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" />
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
           </Popover>
         }
         isRequired

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -15,6 +15,9 @@ export const ModalWithForm: React.FunctionComponent = () => {
   const [nameValue, setNameValue] = React.useState('');
   const [emailValue, setEmailValue] = React.useState('');
   const [addressValue, setAddressValue] = React.useState('');
+  const nameLabelHelpRef = React.useRef(null);
+  const emailLabelHelpRef = React.useRef(null);
+  const addressLabelHelpRef = React.useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
@@ -56,6 +59,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             label="Name"
             labelHelp={
               <Popover
+                triggerRef={nameLabelHelpRef}
                 headerContent={
                   <div>
                     The
@@ -82,7 +86,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <FormGroupLabelHelp aria-label="More info for name field" />
+                <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
               </Popover>
             }
             isRequired
@@ -101,6 +105,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             label="E-mail"
             labelHelp={
               <Popover
+                triggerRef={emailLabelHelpRef}
                 headerContent={
                   <div>
                     The
@@ -123,7 +128,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <FormGroupLabelHelp aria-label="More info for e-mail field" />
+                <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
               </Popover>
             }
             isRequired
@@ -142,6 +147,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             label="Address"
             labelHelp={
               <Popover
+                triggerRef={addressLabelHelpRef}
                 headerContent={
                   <div>
                     The
@@ -163,7 +169,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                   </div>
                 }
               >
-                <FormGroupLabelHelp aria-label="More info for address field" />
+                <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
               </Popover>
             }
             isRequired

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -24,11 +24,11 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
+    default?: 'alignEnd' | 'alignStart';
+    md?: 'alignEnd' | 'alignStart';
+    lg?: 'alignEnd' | 'alignStart';
+    xl?: 'alignEnd' | 'alignStart';
+    '2xl'?: 'alignEnd' | 'alignStart';
   };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';

package/src/components/Toolbar/ToolbarItem.tsx

@@ -28,11 +28,11 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
+    default?: 'alignEnd' | 'alignStart';
+    md?: 'alignEnd' | 'alignStart';
+    lg?: 'alignEnd' | 'alignStart';
+    xl?: 'alignEnd' | 'alignStart';
+    '2xl'?: 'alignEnd' | 'alignStart';
   };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -29,11 +29,11 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   };
   /** Alignment at various breakpoints. */
   alignment?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
+    default?: 'alignEnd' | 'alignStart';
+    md?: 'alignEnd' | 'alignStart';
+    lg?: 'alignEnd' | 'alignStart';
+    xl?: 'alignEnd' | 'alignStart';
+    '2xl'?: 'alignEnd' | 'alignStart';
   };
   /** Spacers at various breakpoints. */
   spacer?: {

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -275,7 +275,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
               <DropdownList>{splitButtonDropdownItems}</DropdownList>
             </Dropdown>
           </ToolbarItem>
-          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+          <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
             <Pagination
               itemCount={37}
               perPage={perPage}

package/src/demos/CardView/examples/CardView.tsx

@@ -442,7 +442,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>

package/src/demos/DashboardHeader.tsx

@@ -100,7 +100,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
           <ToolbarContent>
             <ToolbarGroup
               variant="icon-button-group"
-              align={{ default: 'alignRight' }}
+              align={{ default: 'alignEnd' }}
               spacer={{ default: 'spacerNone', md: 'spacerMd' }}
             >
               {notificationBadge ?? (

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -67,7 +67,7 @@ export const DataListBasic: React.FunctionComponent = () => {
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -176,7 +176,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const headerToolbar = (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignRight' }}>
+        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -226,7 +226,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
   const headerToolbar = (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignRight' }}>
+        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -341,7 +341,7 @@ export const PaginatedTableAction = () => {
           <ToolbarContent>
             <ToolbarGroup
               variant="icon-button-group"
-              align={{ default: 'alignRight' }}
+              align={{ default: 'alignEnd' }}
               spacer={{ default: 'spacerNone', md: 'spacerMd' }}
             >
               <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -365,7 +365,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           <ToolbarContent>
             <ToolbarGroup
               variant="icon-button-group"
-              align={{ default: 'alignRight' }}
+              align={{ default: 'alignEnd' }}
               spacer={{ default: 'spacerNone', md: 'spacerMd' }}
             >
               <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>

package/src/demos/SearchInput/SearchInput.md

@@ -128,9 +128,9 @@ SearchAutocomplete = () => {
         event.preventDefault(); // by default, the up and down arrow keys scroll the window
         // the tab, enter, and space keys will close the menu, and the tab key will move browser
         // focus forward one element (by default)
-      } else if (event.key === 'Tab' || event.key === 'Enter' || event.key === 'Space') {
+      } else if (event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') {
         setIsAutocompleteOpen(false);
-        if (event.key === 'Enter' || event.key === 'Space') {
+        if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
         }
       }

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -382,7 +382,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -129,7 +129,7 @@ export const NavFlyout: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -108,7 +108,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -157,7 +157,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <ToolbarItem isOverflowContainer>{PageNav}</ToolbarItem>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Nav/NavManual.tsx

@@ -124,7 +124,7 @@ export const NavManual: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -120,7 +120,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -120,7 +120,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -112,7 +112,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          align={{ default: 'alignRight' }}
+          align={{ default: 'alignEnd' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -89,9 +89,15 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
+  const labelHelpRef = React.useRef(null);
+
   const iconPopover = (
-    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <FormGroupLabelHelp aria-label="More info for name field" />
+    <Popover
+      triggerRef={labelHelpRef}
+      headerContent={<div>Password Requirements</div>}
+      bodyContent={<div>Password rules</div>}
+    >
+      <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
     </Popover>
   );
 

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -479,7 +479,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
           <DropdownList>{toolbarKebabDropdownItems}</DropdownList>
         </Dropdown>
       </ToolbarItem>
-      <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
+      <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
         {renderPagination()}
       </ToolbarItem>
     </React.Fragment>

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -475,8 +475,8 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
 
   const items = (
     <React.Fragment>
-      <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
-      <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+      <ToolbarGroup align={{ default: 'alignStart' }}>{leftAlignedItems}</ToolbarGroup>
+      <ToolbarGroup align={{ default: 'alignEnd' }}>{rightAlignedItems}</ToolbarGroup>
     </React.Fragment>
   );
 

package/src/next/components/Modal/examples/ModalWithForm.tsx

@@ -7,6 +7,9 @@ export const ModalWithForm: React.FunctionComponent = () => {
   const [nameValue, setNameValue] = React.useState('');
   const [emailValue, setEmailValue] = React.useState('');
   const [addressValue, setAddressValue] = React.useState('');
+  const nameLabelHelpRef = React.useRef(null);
+  const emailLabelHelpRef = React.useRef(null);
+  const addressLabelHelpRef = React.useRef(null);
 
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
@@ -47,6 +50,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
               label="Name"
               labelHelp={
                 <Popover
+                  triggerRef={nameLabelHelpRef}
                   headerContent={
                     <div>
                       The
@@ -73,7 +77,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <FormGroupLabelHelp aria-label="More info for name field" />
+                  <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
                 </Popover>
               }
               isRequired
@@ -92,6 +96,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
               label="E-mail"
               labelHelp={
                 <Popover
+                  triggerRef={emailLabelHelpRef}
                   headerContent={
                     <div>
                       The
@@ -114,7 +119,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <FormGroupLabelHelp aria-label="More info for e-mail field" />
+                  <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
                 </Popover>
               }
               isRequired
@@ -133,6 +138,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
               label="Address"
               labelHelp={
                 <Popover
+                  triggerRef={addressLabelHelpRef}
                   headerContent={
                     <div>
                       The
@@ -154,7 +160,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <FormGroupLabelHelp aria-label="More info for address field" />
+                  <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
                 </Popover>
               }
               isRequired