modal click through allowed

packages/actions/resources/views/action-modal.blade.php

@@ -6,6 +6,7 @@
     $actionIsModalAutofocused = $action->isModalAutofocused();
     $actionHasModalCloseButton = $action->hasModalCloseButton();
     $actionIsModalClosedByClickingAway = $action->isModalClosedByClickingAway();
+    $actionIsModalClickThrough = $action->isModalClickThrough();
     $actionIsModalClosedByEscaping = $action->isModalClosedByEscaping();
     $actionModalDescription = $action->getModalDescription();
     $actionExtraModalWindowAttributeBag = $action->getExtraModalWindowAttributeBag();
@@ -30,6 +31,7 @@
     :autofocus="$actionIsModalAutofocused"
     :close-button="$actionHasModalCloseButton"
     :close-by-clicking-away="$actionIsModalClosedByClickingAway"
+    :click-through="$actionIsModalClickThrough"
     :close-by-escaping="$actionIsModalClosedByEscaping"
     :description="$actionModalDescription"
     :extra-modal-window-attribute-bag="$actionExtraModalWindowAttributeBag"

packages/actions/src/Concerns/CanOpenModal.php

@@ -87,6 +87,8 @@ trait CanOpenModal
 
     protected bool | Closure | null $isModalClosedByClickingAway = null;
 
+    protected bool | Closure | null $isModalClickThrough = null;
+
     protected bool | Closure | null $isModalClosedByEscaping = null;
 
     protected bool | Closure | null $isModalAutofocused = null;
@@ -105,6 +107,13 @@ public function closeModalByClickingAway(bool | Closure | null $condition = true
         return $this;
     }
 
+    public function modalClickThrough(bool | Closure | null $condition = true): static
+    {
+        $this->isModalClickThrough = $condition;
+
+        return $this;
+    }
+
     public function closeModalByEscaping(bool | Closure | null $condition = true): static
     {
         $this->isModalClosedByEscaping = $condition;
@@ -706,6 +715,11 @@ public function isModalClosedByClickingAway(): bool
         return (bool) ($this->evaluate($this->isModalClosedByClickingAway) ?? ModalComponent::$isClosedByClickingAway);
     }
 
+    public function isModalClickThrough(): bool
+    {
+        return (bool) ($this->evaluate($this->isModalClickThrough) ?? ModalComponent::$isModalClickThrough);
+    }
+
     public function isModalClosedByEscaping(): bool
     {
         return (bool) ($this->evaluate($this->isModalClosedByEscaping) ?? ModalComponent::$isClosedByEscaping);

packages/support/resources/views/components/modal/index.blade.php

@@ -12,6 +12,7 @@
     'autofocus' => \Filament\Support\View\Components\ModalComponent::$isAutofocused,
     'closeButton' => \Filament\Support\View\Components\ModalComponent::$hasCloseButton,
     'closeByClickingAway' => \Filament\Support\View\Components\ModalComponent::$isClosedByClickingAway,
+    'clickThrough' => false,
     'closeByEscaping' => \Filament\Support\View\Components\ModalComponent::$isClosedByEscaping,
     'closeEventName' => 'close-modal',
     'closeQuietlyEventName' => 'close-modal-quietly',
@@ -61,6 +62,7 @@
 
     $wireSubmitHandler = $attributes->get('wire:submit.prevent');
     $attributes = $attributes->except(['wire:submit.prevent']);
+    $isClickThrough = $clickThrough && ! $closeByClickingAway;
 @endphp
 
 @if ($trigger)
@@ -113,7 +115,9 @@
     }"
     x-cloak
     x-show="isOpen"
-    x-trap.noscroll{{ $autofocus ? '' : '.noautofocus' }}="isOpen"
+    @unless ($isClickThrough)
+        x-trap.noscroll{{ $autofocus ? '' : '.noautofocus' }}="isOpen"
+    @endunless
     {{
         $attributes->class([
             'fi-modal',
@@ -124,19 +128,22 @@
             'fi-modal-has-sticky-header' => $stickyHeader,
             'fi-modal-has-sticky-footer' => $stickyFooter,
             'fi-width-screen' => $width === Width::Screen,
+            'pointer-events-none' => $isClickThrough,
         ])
     }}
 >
-    <div
-        aria-hidden="true"
-        x-show="isOpen"
-        x-transition.duration.300ms.opacity
-        {{
-            ($extraModalOverlayAttributeBag ?? new \Illuminate\View\ComponentAttributeBag)->class([
-                'fi-modal-close-overlay',
-            ])
-        }}
-    ></div>
+    @unless ($isClickThrough)
+        <div
+            aria-hidden="true"
+            x-show="isOpen"
+            x-transition.duration.300ms.opacity
+            {{
+                ($extraModalOverlayAttributeBag ?? new \Illuminate\View\ComponentAttributeBag)->class([
+                    'fi-modal-close-overlay',
+                ])
+            }}
+        ></div>
+    @endunless
 
     <div
         @if ($closeByClickingAway)
@@ -145,6 +152,7 @@
         @class([
             'fi-modal-window-ctn',
             'fi-clickable' => $closeByClickingAway,
+            'pointer-events-none' => $isClickThrough,
         ])
     >
         <{{ filled($wireSubmitHandler) ? 'form' : 'div' }}

packages/support/src/View/Components/ModalComponent.php

@@ -10,6 +10,8 @@ class ModalComponent
 
     public static bool $isClosedByEscaping = true;
 
+    public static bool $isModalClickThrough = false;
+
     public static bool $isAutofocused = true;
 
     public static function autofocus(bool $condition = true): void
@@ -31,4 +33,9 @@ public static function closedByEscaping(bool $condition = true): void
     {
         static::$isClosedByEscaping = $condition;
     }
+
+    public static function modalClickThrough(bool $condition = true): void
+    {
+        static::$isModalClickThrough = $condition;
+    }
 }