remount the popover component so focus is not trapped on button

ODC-4919: trap foxus inside popover use Focus Trap from patternfly/react-core use FocusTrap from patternfly
openshift · Oct 29, 2020 · c72947e · c72947e
1 parent 969f122
commit c72947e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/frontend/packages/console-app/src/components/tour/StepComponent.tsx b/frontend/packages/console-app/src/components/tour/StepComponent.tsx
@@ -32,6 +32,7 @@ const StepComponent: React.FC<StepComponentProps> = ({
   } = React.useContext(TourContext);
   return (
     <TourStepComponent
+      key={step}
       step={step}
       content={content}
       heading={heading}

diff --git a/frontend/packages/console-shared/src/components/popover/Popover.tsx b/frontend/packages/console-shared/src/components/popover/Popover.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Popper } from '../popper';
-import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { css } from '@patternfly/react-styles';
+import { FocusTrap } from '@patternfly/react-core';
+import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { PopoverArrow } from '@patternfly/react-core/dist/js/components/Popover/PopoverArrow';
 import { PopoverBody } from '@patternfly/react-core/dist/js/components/Popover/PopoverBody';
 import { PopoverCloseButton } from '@patternfly/react-core/dist/js/components/Popover/PopoverCloseButton';
 import { PopoverContent } from '@patternfly/react-core/dist/js/components/Popover/PopoverContent';
 import { PopoverHeader } from '@patternfly/react-core/dist/js/components/Popover/PopoverHeader';
 import { PopoverFooter } from '@patternfly/react-core/dist/js/components/Popover/PopoverFooter';
+import { Popper } from '../popper';
 import { PopoverPlacement } from './const';
 import './Popover.scss';
 
@@ -46,19 +47,21 @@ const Popover: React.FC<PopoverProps> = ({
         modifiers: { arrow: { element: '.ocs-popover__arrow' } },
       }}
     >
-      <div id={id} className={css(styles.popover, className)}>
-        <PopoverArrow className="ocs-popover__arrow" />
-        <PopoverContent>
-          <PopoverCloseButton onClose={onClose} aria-label={'closeBtnAriaLabel'} />
-          {headerContent && (
-            <PopoverHeader id={`popover-${uniqueId}-header`}>{headerContent}</PopoverHeader>
-          )}
-          <PopoverBody id={`popover-${uniqueId}-body`}>{children}</PopoverBody>
-          {footerContent && (
-            <PopoverFooter id={`popover-${uniqueId}-footer`}>{footerContent}</PopoverFooter>
-          )}
-        </PopoverContent>
-      </div>
+      <FocusTrap>
+        <div id={id} className={css(styles.popover, className)}>
+          <PopoverArrow className="ocs-popover__arrow" />
+          <PopoverContent>
+            <PopoverCloseButton onClose={onClose} aria-label={'closeBtnAriaLabel'} />
+            {headerContent && (
+              <PopoverHeader id={`popover-${uniqueId}-header`}>{headerContent}</PopoverHeader>
+            )}
+            <PopoverBody id={`popover-${uniqueId}-body`}>{children}</PopoverBody>
+            {footerContent && (
+              <PopoverFooter id={`popover-${uniqueId}-footer`}>{footerContent}</PopoverFooter>
+            )}
+          </PopoverContent>
+        </div>
+      </FocusTrap>
     </Popper>
   </>
 );

diff --git a/frontend/packages/dev-console/src/components/pipelines/pipeline-topology/TaskListNode.tsx b/frontend/packages/dev-console/src/components/pipelines/pipeline-topology/TaskListNode.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import * as FocusTrap from 'focus-trap-react';
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, FocusTrap } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons';
 import Popper from '@console/shared/src/components/popper/Popper';
 import { KebabItem, KebabOption, ResourceIcon } from '@console/internal/components/utils';

diff --git a/frontend/public/components/utils/kebab.tsx b/frontend/public/components/utils/kebab.tsx
@@ -1,10 +1,9 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
-import * as FocusTrap from 'focus-trap-react';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { KEY_CODES, Tooltip } from '@patternfly/react-core';
+import { KEY_CODES, Tooltip, FocusTrap } from '@patternfly/react-core';
 import { AngleRightIcon, EllipsisVIcon } from '@patternfly/react-icons';
 import Popper from '@console/shared/src/components/popper/Popper';
 import {