fix: unset contain property for modals with file upload editor (#17825)

* fix: unset contain property for modals with file upload editor

* fix: prevent pressing esc to close in `modal` and fix the error when closing the editor

* fix: apply layout containment to select and dropdown, remove from modal window

* fix: move layout containment for select and dropdown into modal context

* fix: add configurable flip and teleport options for dropdowns in action groups

* fix:incorrect position of select inside modal， Done!

* fix: resolve css conflict

* preserve custom dropdown teleport preference

* Update theme.css

---------

Co-authored-by: Dan Harrin <git@danharrin.com>

packages/actions/src/ActionGroup.php

@@ -299,6 +299,8 @@ class ActionGroup extends ViewComponent implements Arrayable, HasEmbeddedView
             'dropdownWidth' => $this->getDropdownWidth(),
             'extraAttributes' => $this->getExtraAttributes(),
             'hasDropdown' => $this->hasDropdown(),
+            'hasDropdownFlip' => $this->hasDropdownFlip(),
+            'hasDropdownTeleport' => $this->hasDropdownTeleport(),
             'icon' => $this->getIcon(),
             'iconPosition' => $this->getIconPosition(),
             'iconSize' => $this->getIconSize(),
@@ -344,6 +346,8 @@ class ActionGroup extends ViewComponent implements Arrayable, HasEmbeddedView
 
         $static->color($data['color'] ?? null);
         $static->dropdown($data['hasDropdown'] ?? false);
+        $static->dropdownFlip($data['hasDropdownFlip'] ?? false);
+        $static->dropdownTeleport($data['hasDropdownTeleport'] ?? false);
         $static->dropdownMaxHeight($data['dropdownMaxHeight'] ?? null);
         $static->dropdownOffset($data['dropdownOffset'] ?? null);
         $static->dropdownPlacement($data['dropdownPlacement'] ?? null);
@@ -472,7 +476,7 @@ class ActionGroup extends ViewComponent implements Arrayable, HasEmbeddedView
 
             <div
                 x-cloak
-                x-float.placement.<?= $this->getDropdownPlacement() ?? 'bottom-start' ?>.flip.teleport.offset="{ offset: <?= $this->getDropdownOffset() ?? 8 ?> }"
+                x-float.placement.<?= $this->getDropdownPlacement() ?? 'bottom-start' ?><?= $this->hasDropdownFlip() ? '.flip' : '' ?><?= $this->hasDropdownTeleport() ? '.teleport' : '' ?>.offset="{ offset: <?= $this->getDropdownOffset() ?? 8 ?> }"
                 x-ref="panel"
                 x-transition:enter-start="fi-opacity-0"
                 x-transition:leave-end="fi-opacity-0"

packages/actions/src/Concerns/HasDropdown.php

@@ -19,6 +19,12 @@ trait HasDropdown
 
     protected Width | string | Closure | null $dropdownWidth = null;
 
+    protected bool | Closure $hasDropdownFlip = true;
+
+    protected bool | Closure | null $hasDropdownTeleport = null;
+
+    protected bool | Closure | null $hasDefaultDropdownTeleport = null;
+
     public function dropdown(bool | Closure $condition = true): static
     {
         $this->hasDropdown = $condition;
@@ -61,6 +67,27 @@ trait HasDropdown
         return $this;
     }
 
+    public function dropdownFlip(bool | Closure $condition = true): static
+    {
+        $this->hasDropdownFlip = $condition;
+
+        return $this;
+    }
+
+    public function dropdownTeleport(bool | Closure | null $condition = true): static
+    {
+        $this->hasDropdownTeleport = $condition;
+
+        return $this;
+    }
+
+    public function defaultDropdownTeleport(bool | Closure | null $condition = true): static
+    {
+        $this->hasDefaultDropdownTeleport = $condition;
+
+        return $this;
+    }
+
     public function getDropdownPlacement(): ?string
     {
         return $this->evaluate($this->dropdownPlacement) ?? $this->evaluate($this->defaultDropdownPlacement);
@@ -87,6 +114,16 @@ trait HasDropdown
         return $width;
     }
 
+    public function hasDropdownFlip(): bool
+    {
+        return (bool) $this->evaluate($this->hasDropdownFlip);
+    }
+
+    public function hasDropdownTeleport(): bool
+    {
+        return (bool) ($this->evaluate($this->hasDropdownTeleport) ?? $this->evaluate($this->hasDefaultDropdownTeleport));
+    }
+
     public function hasDropdown(): bool
     {
         return (bool) $this->evaluate($this->hasDropdown);

packages/forms/resources/views/components/file-upload.blade.php

@@ -168,7 +168,7 @@
                 x-cloak
                 x-on:click.stop=""
                 x-trap.noscroll="isEditorOpen"
-                x-on:keydown.escape.window="closeEditor"
+                x-on:keydown.escape.prevent.stop="closeEditor"
                 @class([
                     'fi-fo-file-upload-editor',
                     'fi-fo-file-upload-editor-circle-cropper' => $hasCircleCropper,
@@ -233,8 +233,8 @@
                                             </x-slot>
 
                                             <input
-                                                x-on:keyup.enter.prevent.stop="{!! $input['alpineSaveHandler'] !!}"
-                                                x-on:blur="{!! $input['alpineSaveHandler'] !!}"
+                                                x-on:keyup.enter.prevent.stop="editor && {!! $input['alpineSaveHandler'] !!}"
+                                                x-on:blur="editor && {!! $input['alpineSaveHandler'] !!}"
                                                 x-ref="{{ $input['ref'] }}"
                                                 x-on:keydown.enter.prevent
                                                 type="text"

packages/support/resources/css/components/modal.css

@@ -123,7 +123,6 @@
 
     & > .fi-modal-window-ctn > .fi-modal-window {
         @apply pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
-        contain: layout;
 
         & .fi-modal-header {
             @apply flex px-6 pt-6;

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

@@ -108,6 +108,7 @@
     {{
         $attributes->class([
             'fi-modal',
+            'fi-absolute-positioning-context',
             'fi-modal-slide-over' => $slideOver,
             'fi-width-screen' => $width === Width::Screen,
         ])

packages/tables/src/Table/Concerns/HasRecordActions.php

@@ -104,7 +104,7 @@ trait HasRecordActions
             : 'bottom-end';
 
         return array_map(
-            fn (Action | ActionGroup $action) => $action instanceof ActionGroup ? $action->defaultDropdownPlacement($defaultGroupDropdownPlacement) : $action,
+            fn (Action | ActionGroup $action) => $action instanceof ActionGroup ? $action->defaultDropdownPlacement($defaultGroupDropdownPlacement)->defaultDropdownTeleport(true) : $action,
             $this->recordActions,
         );
     }