- Fix typo.

- Click on scrollbars in modal was registered as click outside and closed the modal. - Scrollbars in modal caused the side of the modal to lose round corners.
StenaIT · Sep 16, 2024 · 6e57437 · 6e57437
1 parent bfd4043
commit 6e57437
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 33 deletions.
diff --git a/packages/core/src/hooks/__tests__/UseMultiOnClickOutside.test.ts b/packages/core/src/hooks/__tests__/UseMultiOnClickOutside.test.ts
@@ -3,7 +3,7 @@ import { useRef } from "react";
 import { useMultiOnClickOutside } from "../UseMultiOnClickOutside";
 import { vi } from "vitest";
 
-describe("useOnClickOutside", () => {
+describe("useMultiOnClickOutside", () => {
   const options = {
     altKey: true,
     bubbles: true,

diff --git a/packages/modal/src/dialog/UseDialog.tsx b/packages/modal/src/dialog/UseDialog.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames";
 import React, {
   CSSProperties,
+  MouseEventHandler,
   ReactNode,
   RefObject,
   useCallback,
@@ -59,6 +60,7 @@ export function useDialog<TProps, TPromiseResolve = void>(
           rejectRef.current = reject;
         }
       );
+      console.log("SHOW");
       setClosing(false);
       setContentVisible(true);
       forceRerender();
@@ -75,6 +77,7 @@ export function useDialog<TProps, TPromiseResolve = void>(
 
   const resolve = useCallback<ResolveCommand<TPromiseResolve>>(
     (value) => {
+      // Trigger closing animation.
       setClosing(true);
       currentRef.current?.addEventListener(
         "animationend",
@@ -92,8 +95,18 @@ export function useDialog<TProps, TPromiseResolve = void>(
     [currentRef, options]
   );
 
+  const onClose = useCallback(() => {
+    // Remove content immediately, since it cannot be animated when closed by browser.
+    setClosing(false);
+    setContentVisible(false);
+    rejectRef.current?.();
+    options.onReject?.();
+    modalComponentProps.current = undefined;
+  }, [options]);
+
   const reject = useCallback<RejectCommand>(
     (error) => {
+      // Trigger closing animation.
       setClosing(true);
       currentRef.current?.addEventListener(
         "animationend",
@@ -111,53 +124,62 @@ export function useDialog<TProps, TPromiseResolve = void>(
     [currentRef, options]
   );
 
+  const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
+    (e) => {
+      if (e.target !== currentRef.current) {
+        return;
+      }
+
+      const rect = currentRef.current.getBoundingClientRect();
+
+      const clickedInsideDialog =
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width;
+
+      if (!clickedInsideDialog) {
+        reject();
+      }
+    },
+    [currentRef, reject]
+  );
+
   const dialogElement = useMemo<ReactNode>(
     () => (
-      <DialogContext.Provider value={{ resolve, reject }}>
-        <dialog
-          onMouseDown={
-            options.disableCloseOnClickOutside ? undefined : () => reject()
-          }
-          ref={currentRef}
-          className={cx(options.className, closing && options.closingClassName)}
-          style={options.dialogStyle}
+      <dialog
+        onClick={options.disableCloseOnClickOutside ? undefined : onClick}
+        onClose={onClose}
+        ref={currentRef}
+        className={cx(options.className, closing && options.closingClassName)}
+        style={options.dialogStyle}
+      >
+        <div
+          style={options.contentWrapperStyle}
+          className={options.contentWrapperClassName}
         >
-          {options.disableCloseOnClickOutside ? (
-            <>
-              {contentVisible && (
-                <Comp {...(modalComponentProps.current as TProps)} key={key} />
-              )}
-            </>
-          ) : (
-            <div
-              style={options.contentWrapperStyle}
-              className={options.contentWrapperClassName}
-              onMouseDown={
-                options.disableCloseOnClickOutside
-                  ? undefined
-                  : (ev) => ev.stopPropagation()
-              }
-            >
-              {contentVisible && (
-                <Comp {...(modalComponentProps.current as TProps)} key={key} />
-              )}
-            </div>
+          {contentVisible && (
+            <DialogContext.Provider value={{ resolve, reject }}>
+              <Comp {...(modalComponentProps.current as TProps)} key={key} />
+            </DialogContext.Provider>
           )}
-        </dialog>
-      </DialogContext.Provider>
+        </div>
+      </dialog>
     ),
     [
-      resolve,
-      reject,
       options.disableCloseOnClickOutside,
       options.className,
       options.closingClassName,
       options.dialogStyle,
       options.contentWrapperStyle,
       options.contentWrapperClassName,
+      onClick,
+      onClose,
       currentRef,
       closing,
       contentVisible,
+      resolve,
+      reject,
       Comp,
       key,
     ]

diff --git a/packages/modal/src/dialog/modal/ModalDialog.module.css b/packages/modal/src/dialog/modal/ModalDialog.module.css
@@ -10,6 +10,17 @@
 
   @media (min-width: 769px) {
     border-radius: var(--swui-border-radius-large);
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--lhds-color-ui-400);
+      border: 4px solid transparent;
+      border-radius: 8px;
+      background-clip: padding-box;
+    }
+
+    &::-webkit-scrollbar {
+      width: 16px;
+    }
   }
 
   &:not([open]) {