From 634470886c828da7c978778ae4c0b6f1114efd90 Mon Sep 17 00:00:00 2001
From: Mattias Andersson <mattias800@gmail.com>
Date: Tue, 17 Sep 2024 09:19:29 +0200
Subject: [PATCH] Click on modal scrollbar no longer closes modal (#785)

* - 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.

* - Remove console log.
---
 .../__tests__/UseMultiOnClickOutside.test.ts  |  2 +-
 packages/modal/src/dialog/UseDialog.tsx       | 85 ++++++++++++-------
 .../src/dialog/modal/ModalDialog.module.css   | 11 +++
 3 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/packages/core/src/hooks/__tests__/UseMultiOnClickOutside.test.ts b/packages/core/src/hooks/__tests__/UseMultiOnClickOutside.test.ts
index 36bc12886..b7cb48ab2 100644
--- 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
index 9a5b4ac07..bfd13bdcb 100644
--- 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,
@@ -75,6 +76,7 @@ export function useDialog<TProps, TPromiseResolve = void>(
 
   const resolve = useCallback<ResolveCommand<TPromiseResolve>>(
     (value) => {
+      // Trigger closing animation.
       setClosing(true);
       currentRef.current?.addEventListener(
         "animationend",
@@ -92,8 +94,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 +123,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
index 978533e0e..034e3a383 100644
--- 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]) {