#217 Add dangerouslyBypassFocusLock prop on Modal which solves focus lock problems

Add dangerouslyBypassFocusLockprop on Modal which solves focus lock problems

Author: skovacic-croz

libs/alert/src/Modal.tsx

@@ -39,6 +39,11 @@ export type ModalProps<T = unknown> = {
    * Icon shown on the left side of the modal title.
    */
   icon?: React.ReactNode;
+
+  /**
+   * Bypasses focus lock on modal element.
+   */
+  dangerouslyBypassFocusLock?: boolean;
 } & UseModal<T> &
   ModalTokensProps;
 
@@ -145,7 +150,16 @@ function useModalContext() {
   return context;
 }
 
-function Modal<T = unknown>({ isOpen, onClose, state, icon, children, canDismiss = true, ...props }: ModalProps<T>) {
+function Modal<T = unknown>({
+  isOpen,
+  onClose,
+  state,
+  icon,
+  children,
+  canDismiss = true,
+  dangerouslyBypassFocusLock = false,
+  ...props
+}: ModalProps<T>) {
   const tokens = useTokens("Modal", props.tokens);
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -178,7 +192,7 @@ function Modal<T = unknown>({ isOpen, onClose, state, icon, children, canDismiss
   );
 
   return (
-    <DialogOverlay isOpen={isOpen} onDismiss={onDismiss}>
+    <DialogOverlay isOpen={isOpen} onDismiss={onDismiss} dangerouslyBypassFocusLock={dangerouslyBypassFocusLock}>
       <ModalContext.Provider value={modalContext}>
         <div className={baseClassName}>
           <div className={tokens.Container.Overlay.outer}>

storybook/src/alert/Modal.mdx

@@ -27,6 +27,13 @@ When modals become too long for the user’s viewport or device, they `scroll` i
   <Story id="component-library-alert-modal--with-scrollbar" />
 </Canvas>
 
+When action on modal opens another popup which needs to get focused, modal will keep focus and will not let for example input element to get focus.
+In this case you should use `dangerouslyBypassFocusLock` prop.
+
+<Canvas>
+    <Story id="component-library-alert-modal--with-bypassed-focus-lock" />
+</Canvas>
+
 ## Modal With State
 
 `State` prop is used for fetching or storing the **state** of the modal.

storybook/src/alert/Modal.stories.tsx

@@ -20,13 +20,15 @@ import * as React from "react";
 import { withDesign } from "storybook-addon-designs";
 
 import { Modal, useModal } from "@tiller-ds/alert";
-import { Button } from "@tiller-ds/core";
+import { Button, Typography } from "@tiller-ds/core";
 import { DescriptionList } from "@tiller-ds/data-display";
 import { Icon } from "@tiller-ds/icons";
 import { Intl } from "@tiller-ds/intl";
 
 import mdx from "./Modal.mdx";
 import { beautifySource } from "../utils";
+import { Input } from "@tiller-ds/form-elements";
+import { useState } from "react";
 
 export default {
   title: "Component Library/Alert/Modal",
@@ -228,3 +230,99 @@ export const WithScrollbar = () => {
     </>
   );
 };
+
+export const WithBypassedFocusLock = () => {
+  // incl-code
+  const modal = useModal();
+  const modalWithBypassedFocusLock = useModal();
+  const [showPopup, setShowPopup] = useState(false);
+  const [showBypassedFocusLockPopup, setShowBypassedFocusLockPopup] = useState(false);
+
+  return (
+    <>
+      <div className="flex space-x-2">
+        <Button id="open-button" onClick={modal.onOpen}>
+          <Intl name="Normal" />
+        </Button>
+        <Button id="open-button" onClick={modalWithBypassedFocusLock.onOpen}>
+          <Intl name="Bypassed focus lock" />
+        </Button>
+      </div>
+
+      <Modal {...modal} icon={<Modal.Icon icon={<Icon type="check" variant="bold" />} className="text-white" />}>
+        <Modal.Content title={<Intl name="modalTitle" />}>
+          <Intl name="modalContent" />
+        </Modal.Content>
+
+        <Modal.Footer>
+          <Button variant="filled" color="success" onClick={() => setShowPopup(true)}>
+            <Intl name="Open popup" />
+          </Button>
+          <Button variant="text" color="white" onClick={modal.onClose}>
+            <Intl name="cancel" />
+          </Button>
+        </Modal.Footer>
+      </Modal>
+
+      <Modal
+        {...modalWithBypassedFocusLock}
+        icon={<Modal.Icon icon={<Icon type="check" variant="bold" />} className="text-white" />}
+        dangerouslyBypassFocusLock={true}
+      >
+        <Modal.Content title={<Intl name="modalTitle" />}>
+          <Intl name="modalContent" />
+        </Modal.Content>
+
+        <Modal.Footer>
+          <Button variant="filled" color="success" onClick={() => setShowBypassedFocusLockPopup(true)}>
+            <Intl name="Open popup" />
+          </Button>
+          <Button variant="text" color="white" onClick={modalWithBypassedFocusLock.onClose}>
+            <Intl name="cancel" />
+          </Button>
+        </Modal.Footer>
+      </Modal>
+
+      <Popup
+        text="Without this option, focus is locked on 'first' modal."
+        isOpen={showPopup}
+        setIsOpen={setShowPopup}
+      />
+      <Popup
+        text="With bypassed focus lock, input field can get focused."
+        isOpen={showBypassedFocusLockPopup}
+        setIsOpen={setShowBypassedFocusLockPopup}
+      />
+    </>
+  );
+};
+
+type PopupProps = {
+  text: string;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+};
+
+function Popup({ text, isOpen, setIsOpen }: PopupProps) {
+  return isOpen ? (
+    <div className="flex items-center justify-center z-[10000000000] fixed inset-0">
+      <div className="rounded-lg shadow-lg bg-white outline-none focus:outline-none">
+        <div className="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
+          <h3 className="text-2xl font-semibold">Popup with input fields</h3>
+          <button
+            className="p-1 ml-auto bg-transparent border-0 text-black text-3xl leading-none font-bold outline-none focus:outline-none"
+            onClick={() => setIsOpen(false)}
+          >
+            <span className="">×</span>
+          </button>
+        </div>
+        <div className="flex flex-col items-start p-5 space-y-4">
+          <Typography>{text}</Typography>
+          <Input name="test" />
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}