Fix partial updates with multiple matches

filamentphp · Feb 5, 2025 · 56d33cd · 56d33cd
1 parent 41b1902
commit 56d33cd
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/packages/actions/resources/views/action-modal.blade.php b/packages/actions/resources/views/action-modal.blade.php
@@ -39,7 +39,7 @@
         :sticky-header="$actionIsModalHeaderSticky"
         :width="$actionModalWidth"
         :wire:key="$actionModalWireKey"
-        x-on:modal-closed.stop="$wire.unmountAction(false)"
+        :x-on:modal-closed="'if ($event.detail.id === ' . \Illuminate\Support\Js::from($actionModalId) . ') $wire.unmountAction(false)'"
     >
         {{ $action->getModalContent() }}
 

diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php
@@ -37,26 +37,17 @@
             openModal: function () {
                 const id = this.generateModalId(this.actionNestingIndex)
 
-                if (! this.$el.querySelector(`#${id}`)) {
-                    return
-                }
-
                 this.$dispatch('open-modal', { id })
             },
 
             closeModal: function () {
                 const id = this.generateModalId(this.actionNestingIndex)
 
-                if (! this.$el.querySelector(`#${id}`)) {
-                    return
-                }
-
                 this.$dispatch('close-modal-quietly', { id })
             },
         }"
         x-on:sync-action-modals.window="
-            if ($event.detail.id === '{{ $this->getId() }}')
-                syncActionModals($event.detail.newActionNestingIndex)
+            if ($event.detail.id === @js($this->getId())) syncActionModals($event.detail.newActionNestingIndex)
         "
         style="height: 0"
     >

diff --git a/packages/support/resources/js/components/modal.js b/packages/support/resources/js/components/modal.js
@@ -16,7 +16,7 @@ export default ({ id }) => ({
     close: function () {
         this.closeQuietly()
 
-        this.$root.dispatchEvent(new CustomEvent('modal-closed', { id }))
+        this.$dispatch('modal-closed', { id })
     },
 
     closeQuietly: function () {

diff --git a/packages/support/resources/js/index.js b/packages/support/resources/js/index.js
@@ -89,14 +89,24 @@ document.addEventListener('livewire:init', () => {
                 for (const [name, html] of Object.entries(
                     component.effects.partials ?? {},
                 )) {
-                    let el = component.el.querySelector(
-                        '[wire\\:partial="' + name + '"]',
-                    )
+                    let els = Array.from(
+                        component.el.querySelectorAll(
+                            '[wire\\:partial="' + name + '"]',
+                        ),
+                    ).filter((el) => closestComponent(el) === component)
 
-                    if (!el) {
+                    if (!els.length) {
                         continue
                     }
 
+                    if (els.length > 1) {
+                        throw new Error(
+                            `Multiple elements found for partial [${name}].`,
+                        )
+                    }
+
+                    let el = els[0]
+
                     let wrapperTag = el.parentElement
                         ? // If the root element is a "tr", we need the wrapper to be a "table"...
                           el.parentElement.tagName.toLowerCase()
@@ -105,13 +115,7 @@ document.addEventListener('livewire:init', () => {
                     let wrapper = document.createElement(wrapperTag)
 
                     wrapper.innerHTML = html
-                    let parentComponent
-
-                    try {
-                        parentComponent = closestComponent(el.parentElement)
-                    } catch (exception) {}
-
-                    parentComponent && (wrapper.__livewire = parentComponent)
+                    wrapper.__livewire = component
 
                     let to = wrapper.firstElementChild
 
@@ -123,6 +127,16 @@ document.addEventListener('livewire:init', () => {
                                 return
                             }
 
+                            if (el.__livewire_replace === true) {
+                                el.innerHTML = toEl.innerHTML
+                            }
+
+                            if (el.__livewire_replace_self === true) {
+                                el.outerHTML = toEl.outerHTML
+
+                                return skip()
+                            }
+
                             if (el.__livewire_ignore === true) {
                                 return skip()
                             }