<flux:editor> validation errors not properly handled (no red outline)

[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>