Editor not showing red outline on validation error

[orchidcode]

Flux version

v1.1.2

Livewire version

v3.5.12

What is the problem?

When flux:editor has a validation error, the error is properly displayed (in red) below the editor but the editor is not getting the red outline. Also, when :invalid property is set dynamically, the outline does not show however when hardcoded it works properly.

Code snippets

<flux:editor wire:model="description" toolbar="heading | bold italic underline highlight | bullet ordered ~ undo redo" label="{{ __('Detailed offer description') }}" :invalid="$errors->has('description')" />

$this->validate(['description' => 'required|string']);

How do you expect it to work?

This works as expected (when :invalid is hardcoded).

<flux:editor wire:model="description" toolbar="heading | bold italic underline highlight | bullet ordered ~ undo redo" label="{{ __('Detailed offer description') }}" :invalid="true" />

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@orchidcode thanks for reporting!

I've just tested this and yeah the red error border isn't showing up. The reason for this is the flux:editor component has wire:ignore on it, so Livewire isn't updating the attributes on the editor component hence the colour isn't showing up.

Volt component that demonstrates the issue.

<?php

use Livewire\Attributes\Validate;
use Livewire\Volt\Component;

new class extends Component {
    #[Validate(['required'])]
    public $content;

    public function save()
    {
        $this->validate();
    }
};

?>

<div>
    <flux:editor label="Editor" wire:model.live="content" />

    <flux:button wire:click="save" />
</div>

[calebporzio]

Ahh good catch, I think we can move wire:ignore to the editor.content component solely to fix this issue. thanks

[joshhanley]

I've submitted a PR with a fix for this! PR description below.

The scenario

Currently the editor component won't show the red border when a validation error has occurred.

<?php

use Livewire\Attributes\Validate;
use Livewire\Volt\Component;

new class extends Component {
    #[Validate(['required'])]
    public $content;

    public function save()
    {
        $this->validate();
    }
};

?>

<div>
    <flux:editor label="Editor" wire:model.live="content" />

    <flux:button wire:click="save" />
</div>

The problem

The reason the outline is not being shown is because the ui-editor component inside the <flux:editor> has a wire:ignore on it, so Livewire isn't updating the attributes to add the red border class when an error has occurred.

The solution

To fix this, we thought we could just just move the wire:ignore out of the flux:editor component and on to the flux:editor.content directly.

But that causes the toolbar to break when it re-renders.

Before Request

After Request

So I've had to add wire:ignore to both the editor.content and editor.toolbar components.