Skip to content

Commit

Permalink
Merge pull request #10280 from filamentphp/fix/expand-validation-error
Browse files Browse the repository at this point in the history 
fix: Expand validation error
  • Loading branch information
@danharrin
danharrin authored Dec 13, 2023
2 parents c630038 + 0225f62 commit d3ea0d5
Show file tree
Hide file tree
Showing 11 changed files with 81 additions and 150 deletions.
37 changes: 37 additions & 0 deletions packages/forms/resources/views/component-container.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,45 @@
@php
use Filament\Support\Enums\MaxWidth;
use Illuminate\Support\Js;
$isRoot = $isRoot();
@endphp

<x-filament::grid
:x-data="$isRoot ? '{}' : null"
:x-on:expand-concealing-component.window="
$isRoot ? ('
if ($event.detail.livewireId !== ' . Js::from($this->getId()) . ') {
return
}
$nextTick(() => {
error = $el.querySelector(\'[data-validation-error]\')
if (! error) {
return
}
elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent(\'expand\'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.scrollIntoView({
behavior: \'smooth\',
block: \'start\',
inline: \'start\',
}),
200,
)
})
') : null
"
:default="$getColumns('default')"
:sm="$getColumns('sm')"
:md="$getColumns('md')"
Expand Down
26 changes: 1 addition & 25 deletions packages/forms/resources/views/components/builder.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,31 +88,7 @@ class="space-y-4"
}"
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="
$nextTick(() => {
error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
isCollapsed = false
if (document.body.querySelector('[data-validation-error]') !== error) {
return
}
setTimeout(
() =>
$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})
"
x-on:expand="isCollapsed = false"
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"
x-bind:class="{ 'fi-collapsed overflow-hidden': isCollapsed }"
Expand Down
26 changes: 1 addition & 25 deletions packages/forms/resources/views/components/repeater.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,31 +86,7 @@ class="gap-4"
x-data="{
isCollapsed: @js($isCollapsed($item)),
}"
x-on:expand-concealing-component.window="
$nextTick(() => {
error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
isCollapsed = false
if (document.body.querySelector('[data-validation-error]') !== error) {
return
}
setTimeout(
() =>
$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})
"
x-on:expand="isCollapsed = false"
x-on:repeater-expand.window="$event.detail === '{{ $statePath }}' && (isCollapsed = false)"
x-on:repeater-collapse.window="$event.detail === '{{ $statePath }}' && (isCollapsed = true)"
x-sortable-item="{{ $uuid }}"
Expand Down
26 changes: 1 addition & 25 deletions packages/forms/resources/views/components/tabs/tab.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,7 @@

<div
x-bind:class="tab === @js($id) ? @js($visibleTabClasses) : @js($invisibleTabClasses)"
x-on:expand-concealing-component.window="
$nextTick(() => {
error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
tab = @js($id)
if (document.body.querySelector('[data-validation-error]') !== error) {
return
}
setTimeout(
() =>
$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})
"
x-on:expand="tab = @js($id)"
{{
$attributes
->merge([
Expand Down
8 changes: 5 additions & 3 deletions packages/forms/resources/views/components/wizard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,10 @@
return this.getStepIndex(this.step) + 1 >= this.getSteps().length
},
isStepAccessible: function (step, index) {
return @js($isSkippable()) || this.getStepIndex(step) > index
isStepAccessible: function (stepId) {
return (
@js($isSkippable()) || this.getStepIndex(this.step) > this.getStepIndex(stepId)
)
},
updateQueryString: function () {
Expand Down Expand Up @@ -134,7 +136,7 @@ class="fi-fo-wizard-header-step relative flex"
type="button"
x-bind:aria-current="getStepIndex(step) === {{ $loop->index }} ? 'step' : null"
x-on:click="step = @js($step->getId())"
x-bind:disabled="! isStepAccessible(step, {{ $loop->index }})"
x-bind:disabled="! isStepAccessible(@js($step->getId()))"
role="step"
class="fi-fo-wizard-header-step-button flex h-full w-full items-center gap-x-4 px-6 py-4"
>
Expand Down
32 changes: 5 additions & 27 deletions packages/forms/resources/views/components/wizard/step.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,12 @@

<div
x-bind:class="step === @js($id) ? @js($visibleStepClasses) : @js($invisibleStepClasses)"
x-on:expand-concealing-component.window="
$nextTick(() => {
error = $el.querySelector('[data-validation-error]')
x-on:expand="
if (! isStepAccessible(@js($id))) {
return
}
if (! error) {
return
}
if (! isStepAccessible(step, @js($id))) {
return
}
step = @js($id)
if (document.body.querySelector('[data-validation-error]') !== error) {
return
}
setTimeout(
() =>
$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})
step = @js($id)
"
x-ref="step-{{ $id }}"
{{
Expand Down
5 changes: 5 additions & 0 deletions packages/forms/src/Concerns/BelongsToParentComponent.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,9 @@ public function getParentComponent(): ?Component
{
return $this->parentComponent;
}

public function isRoot(): bool
{
return $this->parentComponent === null;
}
}
38 changes: 19 additions & 19 deletions packages/forms/src/Concerns/InteractsWithForms.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,29 +172,12 @@ public function validate($rules = null, $messages = [], $attributes = []): array
} catch (ValidationException $exception) {
$this->onValidationError($exception);

$this->dispatch('expand-concealing-component');
$this->dispatch('expand-concealing-component', livewireId: $this->getId());

throw $exception;
}
}

protected function onValidationError(ValidationException $exception): void
{
}

/**
* @param array<string, mixed> $attributes
* @return array<string, mixed>
*/
protected function prepareForValidation($attributes): array
{
foreach ($this->getCachedForms() as $form) {
$attributes = $form->mutateStateForValidation($attributes);
}

return $attributes;
}

/**
* @param string $field
* @param array<string, array<mixed>> $rules
Expand All @@ -210,12 +193,29 @@ public function validateOnly($field, $rules = null, $messages = [], $attributes
} catch (ValidationException $exception) {
$this->onValidationError($exception);

$this->dispatch('expand-concealing-component');
$this->dispatch('expand-concealing-component', livewireId: $this->getId());

throw $exception;
}
}

protected function onValidationError(ValidationException $exception): void
{
}

/**
* @param array<string, mixed> $attributes
* @return array<string, mixed>
*/
protected function prepareForValidation($attributes): array
{
foreach ($this->getCachedForms() as $form) {
$attributes = $form->mutateStateForValidation($attributes);
}

return $attributes;
}

/**
* @return class-string<TranslatableContentDriver> | null
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/panels/dist/theme.css
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions packages/panels/resources/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,9 @@
:root.dark {
color-scheme: dark;
}

/* When scrolling to validation error, do not hide element behind the top bar */
[data-validation-error] {
scroll-margin-top: 10rem;
}
}
26 changes: 1 addition & 25 deletions packages/support/resources/views/components/section/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,31 +37,7 @@
}"
@if ($collapsible)
x-on:collapse-section.window="if ($event.detail.id == $el.id) isCollapsed = true"
x-on:expand-concealing-component.window="
$nextTick(() => {
error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
isCollapsed = false
if (document.body.querySelector('[data-validation-error]') !== error) {
return
}
setTimeout(
() =>
$el.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})
"
x-on:expand="isCollapsed = false"
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"
x-bind:class="isCollapsed && 'fi-collapsed'"
Expand Down

0 comments on commit d3ea0d5

Please sign in to comment.