Merge pull request #9084 from cheesegrits/3.x-onexpand-concealing

Wrap all expand-concealing-component event code in $nextTick
This commit is contained in:
Dan Harrin
2023-10-14 12:44:46 +01:00
committed by GitHub
5 changed files with 98 additions and 88 deletions
@@ -78,27 +78,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 }}"
class="fi-fo-builder-item rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10"
@@ -79,27 +79,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)"
@@ -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
@@ -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 }}"
{{
@@ -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"