From 2f7dadc01ae4aae6390d397c0304f937ffe7c03e Mon Sep 17 00:00:00 2001
From: Hugh Messenger <hugh.messenger@gmail.com>
Date: Fri, 13 Oct 2023 17:42:48 -0500
Subject: [PATCH] Wrap all expand-concealing-component event code in $nextTick

---
 .../views/components/builder.blade.php        | 36 ++++++++--------
 .../views/components/repeater.blade.php       | 36 ++++++++--------
 .../views/components/tabs/tab.blade.php       | 36 ++++++++--------
 .../views/components/wizard/step.blade.php    | 42 ++++++++++---------
 .../views/components/section/index.blade.php  | 36 ++++++++--------
 5 files changed, 98 insertions(+), 88 deletions(-)

diff --git a/packages/forms/resources/views/components/builder.blade.php b/packages/forms/resources/views/components/builder.blade.php
index 2411e7203e..c06c881945 100644
--- a/packages/forms/resources/views/components/builder.blade.php
+++ b/packages/forms/resources/views/components/builder.blade.php
@@ -69,27 +69,29 @@
                         x-on:builder-expand.window="$event.detail === '{{ $statePath }}' && (isCollapsed = false)"
                         x-on:builder-collapse.window="$event.detail === '{{ $statePath }}' && (isCollapsed = true)"
                         x-on:expand-concealing-component.window="
-                            error = $el.querySelector('[data-validation-error]')
+                            $nextTick(() => {
+                                error = $el.querySelector('[data-validation-error]')
 
-                            if (! error) {
-                                return
-                            }
+                                if (! error) {
+                                    return
+                                }
 
-                            isCollapsed = false
+                                isCollapsed = false
 
-                            if (document.body.querySelector('[data-validation-error]') !== error) {
-                                return
-                            }
+                                if (document.body.querySelector('[data-validation-error]') !== error) {
+                                    return
+                                }
 
-                            setTimeout(
-                                () =>
-                                    $el.scrollIntoView({
-                                        behavior: 'smooth',
-                                        block: 'start',
-                                        inline: 'start',
-                                    }),
-                                200,
-                            )
+                                setTimeout(
+                                    () =>
+                                        $el.scrollIntoView({
+                                            behavior: 'smooth',
+                                            block: 'start',
+                                            inline: 'start',
+                                        }),
+                                    200,
+                                )
+                            })
                         "
                         x-sortable-item="{{ $uuid }}"
                         x-bind:class="isCollapsed && 'fi-collapsed'"
diff --git a/packages/forms/resources/views/components/repeater.blade.php b/packages/forms/resources/views/components/repeater.blade.php
index cef8092ce9..38a78f9dcd 100644
--- a/packages/forms/resources/views/components/repeater.blade.php
+++ b/packages/forms/resources/views/components/repeater.blade.php
@@ -72,27 +72,29 @@
                                 isCollapsed: @js($isCollapsed($item)),
                             }"
                             x-on:expand-concealing-component.window="
-                                error = $el.querySelector('[data-validation-error]')
+                                $nextTick(() => {
+                                    error = $el.querySelector('[data-validation-error]')
 
-                                if (! error) {
-                                    return
-                                }
+                                    if (! error) {
+                                        return
+                                    }
 
-                                isCollapsed = false
+                                    isCollapsed = false
 
-                                if (document.body.querySelector('[data-validation-error]') !== error) {
-                                    return
-                                }
+                                    if (document.body.querySelector('[data-validation-error]') !== error) {
+                                        return
+                                    }
 
-                                setTimeout(
-                                    () =>
-                                        $el.scrollIntoView({
-                                            behavior: 'smooth',
-                                            block: 'start',
-                                            inline: 'start',
-                                        }),
-                                    200,
-                                )
+                                    setTimeout(
+                                        () =>
+                                            $el.scrollIntoView({
+                                                behavior: 'smooth',
+                                                block: 'start',
+                                                inline: 'start',
+                                            }),
+                                        200,
+                                    )
+                                })
                             "
                             x-on:repeater-expand.window="$event.detail === '{{ $statePath }}' && (isCollapsed = false)"
                             x-on:repeater-collapse.window="$event.detail === '{{ $statePath }}' && (isCollapsed = true)"
diff --git a/packages/forms/resources/views/components/tabs/tab.blade.php b/packages/forms/resources/views/components/tabs/tab.blade.php
index 5316d4ceb0..3fff0e93f4 100644
--- a/packages/forms/resources/views/components/tabs/tab.blade.php
+++ b/packages/forms/resources/views/components/tabs/tab.blade.php
@@ -13,27 +13,29 @@
 <div
     x-bind:class="tab === @js($id) ? @js($visibleTabClasses) : @js($invisibleTabClasses)"
     x-on:expand-concealing-component.window="
-        error = $el.querySelector('[data-validation-error]')
+        $nextTick(() => {
+            error = $el.querySelector('[data-validation-error]')
 
-        if (! error) {
-            return
-        }
+            if (! error) {
+                return
+            }
 
-        tab = @js($id)
+            tab = @js($id)
 
-        if (document.body.querySelector('[data-validation-error]') !== error) {
-            return
-        }
+            if (document.body.querySelector('[data-validation-error]') !== error) {
+                return
+            }
 
-        setTimeout(
-            () =>
-                $el.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start',
-                    inline: 'start',
-                }),
-            200,
-        )
+            setTimeout(
+                () =>
+                    $el.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start',
+                        inline: 'start',
+                    }),
+                200,
+            )
+        })
     "
     {{
         $attributes
diff --git a/packages/forms/resources/views/components/wizard/step.blade.php b/packages/forms/resources/views/components/wizard/step.blade.php
index 7f9adfb0f3..3b51c6b098 100644
--- a/packages/forms/resources/views/components/wizard/step.blade.php
+++ b/packages/forms/resources/views/components/wizard/step.blade.php
@@ -13,31 +13,33 @@
 <div
     x-bind:class="step === @js($id) ? @js($visibleStepClasses) : @js($invisibleStepClasses)"
     x-on:expand-concealing-component.window="
-        error = $el.querySelector('[data-validation-error]')
+        $nextTick(() => {
+            error = $el.querySelector('[data-validation-error]')
 
-        if (! error) {
-            return
-        }
+            if (! error) {
+                return
+            }
 
-        if (! isStepAccessible(step, @js($id))) {
-            return
-        }
+            if (! isStepAccessible(step, @js($id))) {
+                return
+            }
 
-        step = @js($id)
+            step = @js($id)
 
-        if (document.body.querySelector('[data-validation-error]') !== error) {
-            return
-        }
+            if (document.body.querySelector('[data-validation-error]') !== error) {
+                return
+            }
 
-        setTimeout(
-            () =>
-                $el.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start',
-                    inline: 'start',
-                }),
-            200,
-        )
+            setTimeout(
+                () =>
+                    $el.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start',
+                        inline: 'start',
+                    }),
+                200,
+            )
+        })
     "
     x-ref="step-{{ $id }}"
     {{
diff --git a/packages/support/resources/views/components/section/index.blade.php b/packages/support/resources/views/components/section/index.blade.php
index 02015f89d3..7a981b1393 100644
--- a/packages/support/resources/views/components/section/index.blade.php
+++ b/packages/support/resources/views/components/section/index.blade.php
@@ -31,27 +31,29 @@
     @if ($collapsible)
         x-on:collapse-section.window="if ($event.detail.id == $el.id) isCollapsed = true"
         x-on:expand-concealing-component.window="
-            error = $el.querySelector('[data-validation-error]')
+            $nextTick(() => {
+                error = $el.querySelector('[data-validation-error]')
 
-            if (! error) {
-                return
-            }
+                if (! error) {
+                    return
+                }
 
-            isCollapsed = false
+                isCollapsed = false
 
-            if (document.body.querySelector('[data-validation-error]') !== error) {
-                return
-            }
+                if (document.body.querySelector('[data-validation-error]') !== error) {
+                    return
+                }
 
-            setTimeout(
-                () =>
-                    $el.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start',
-                        inline: 'start',
-                    }),
-                200,
-            )
+                setTimeout(
+                    () =>
+                        $el.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'start',
+                            inline: 'start',
+                        }),
+                    200,
+                )
+            })
         "
         x-on:open-section.window="if ($event.detail.id == $el.id) isCollapsed = false"
         x-on:toggle-section.window="if ($event.detail.id == $el.id) isCollapsed = ! isCollapsed"