modal click through allowed

[tanthammar]

Description

Adds:

• modalClickThrough(bool $condition = true) to the ModalComponent
• modalClickThrough(bool | Closure | null $condition = true) to Concerns\CanOpenModal

When enabled, the modal backdrop becomes fully transparent to pointer events and the focus trap is removed, allowing users to interact with content behind the modal while it remains open.

Intended use case
Text only modals/slide-overs that stay open while the user can interact with the page behind/next to the modal.
(Example, show a narrow slide over with help documentation while the user fills out a form.)

Accessibility
By removing x-trap, tab order may be a concern if used with modals containing a form. Suggesting to add a note to documentation.

Visual changes

• The backdrop overlay is invisible (no dark/dimmed background)
• The modal window itself remains visible when clicking outside
• The backdrop area is fully transparent and click-through to content behind

Functional changes

• Code style has been fixed by running the composer cs command.
• Changes have been tested to not break existing functionality.
• Documentation is up-to-date.

[tanthammar]

@danharrin

do you want to keep the backdrop and the extra attribute bag?

packages/support/resources/views/components/modal/index.blade.php, line 135

keep backdrop

    <div
            aria-hidden="true"
            x-show="isOpen"
            @unless($isClickThrough)
                x-transition.duration.300ms.opacity
            @endunless
            {{
                ($extraModalOverlayAttributeBag ?? new \Illuminate\View\ComponentAttributeBag)->class([
                    'fi-modal-close-overlay' => ! $isClickThrough,
                    'pointer-events-none' => $isClickThrough,
                ])
            }}
    ></div>

remove backdrop (current)

    @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

[tanthammar]

@danharrin

If we want to prevent accessibility issues we could override the feature if the modal contains a form:

// packages/support/resources/views/components/modal/index.blade.php, line 65
$isClickThrough = $clickThrough && !$closeByClickingAway && blank($wireSubmitHandler);

Please tell me if you want that change...

[webard]

Awesome! That's exactly what I needed and I'm working on until now.