TPP-849 fixed click/focus issues (#307)

orchestrated-io · Aug 1, 2024 · 84e6b89 · 84e6b89
1 parent 8ae0fa4
commit 84e6b89
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 36 deletions.
diff --git a/lib/components/ActionsMenu/index.js b/lib/components/ActionsMenu/index.js
@@ -321,7 +321,7 @@ export const ActionsMenuBody = ({
             >
               <div
                 ref={ref}
-                style={{ ...actionMenu.floatingStyles }}
+                style={{ ...actionMenu.floatingStyles, zIndex: 21 }}
                 aria-labelledby={actionMenu.labelId}
                 {...actionMenu.getFloatingProps(props)}
                 className="actionMenu-content"

diff --git a/lib/components/Popover/Popover.stories.js b/lib/components/Popover/Popover.stories.js
@@ -20,7 +20,7 @@ export default {
 
 export const defaultPopover = () => (
   <Popover text="Description that explains child element">
-    <Button>Hover Me!</Button>
+    <Button onClick={() => alert("Maintains original click")}>Hover Me!</Button>
   </Popover>
 );
 defaultPopover.storyName = "Default";

diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
@@ -12,12 +12,13 @@ import {
   useInteractions,
   FloatingPortal,
   safePolygon,
-  useClick
+  FloatingFocusManager
 } from "@floating-ui/react";
 import themeGet from "@styled-system/theme-get";
 import styled from "styled-components";
 import Icon from "../Icon";
 import { PropTypes } from "prop-types";
+import Box from "../Box";
 
 const DIRECTIONS_MAP = {
   topLeft: "top-start",
@@ -36,7 +37,7 @@ const StyledPopoverContainer = styled.div`
   transition: all 300ms ease-in-out;
   transition-delay: 300ms;
 
-  &.isOpen {
+  &.visible {
     opacity: 1;
     pointer-events: auto;
   }
@@ -267,11 +268,11 @@ export default function Popover({
   ariaLabel,
   ...props
 }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
+    open: visible,
+    onOpenChange: setVisible,
     placement: DIRECTIONS_MAP[direction] || direction || "right",
     whileElementsMounted: autoUpdate,
     middleware: [
@@ -286,37 +287,35 @@ export default function Popover({
 
   const hover = useHover(context, { move: false, handleClose: safePolygon() });
   const focus = useFocus(context);
-  const click = useClick(context, {
-    enabled: true
-  });
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: "tooltip" });
 
   const { getReferenceProps, getFloatingProps } = useInteractions([
     hover,
     focus,
     dismiss,
-    role,
-    click
+    role
   ]);
 
   const triggerProps = {
-    ...getReferenceProps({ ref: refs.setReference })
+    ...getReferenceProps({
+      ref: refs.setReference
+    })
   };
 
   let triggerComponent = null;
 
   if (variant === "tooltip") {
     triggerComponent = (
-      <TooltipControl {...triggerProps} active={isOpen}>
+      <TooltipControl {...triggerProps} active={visible} tabIndex="0">
         <Icon
           transform="grow-4"
           icon={["fas", "question-circle"]}
           fontSize="2"
         />
       </TooltipControl>
     );
-  } else if (children.type.$$typeof === Symbol.for("react.forward_ref")) {
+  } else if (children?.type?.$$typeof === Symbol.for("react.forward_ref")) {
     triggerComponent = cloneElement(children, triggerProps);
   } else {
     triggerComponent = <div {...triggerProps}>{children}</div>;
@@ -328,34 +327,37 @@ export default function Popover({
       : context.placement;
 
   return (
-    <div {...props}>
+    <Box {...props}>
       {triggerComponent}
 
-      <FloatingPortal>
+      <FloatingPortal preserveTabOrder={true}>
         {text && (
           <StyledPopoverContainer
-            className={`Tooltip ${isOpen ? "isOpen" : ""}`}
+            className={`Tooltip popover ${visible ? "visible" : ""}`}
             ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps({
-              onMouseEnter: () => setIsOpen(true),
-              onMouseLeave: () => setIsOpen(false)
-            })}
+            style={{ ...floatingStyles, zIndex: 21 }}
+            {...getFloatingProps()}
           >
-            <StyledPopover
-              className={`${directionClass}`}
-              role="tooltip"
-              textAlign={textAlign}
-              width={width}
-              enableSelectAll={enableSelectAll}
-              ariaLabel={ariaLabel}
+            <FloatingFocusManager
+              initialFocus={context.refs?.reference}
+              context={context}
+              modal={false}
             >
-              {text}
-            </StyledPopover>
+              <StyledPopover
+                className={`${directionClass}`}
+                role="tooltip"
+                textAlign={textAlign}
+                width={width}
+                enableSelectAll={enableSelectAll}
+                ariaLabel={ariaLabel}
+              >
+                {text}
+              </StyledPopover>
+            </FloatingFocusManager>
           </StyledPopoverContainer>
         )}
       </FloatingPortal>
-    </div>
+    </Box>
   );
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.12",
+  "version": "3.2.13",
   "engines": {
     "node": "20.12.2"
   },