Datepicker input has no red border when invalid like other inputs

[lucasromanojf]

Flux version

v2.0.2

Livewire version

v3.5.20

Tailwind version

v4.0.7

Browser and Operating System

Edge on MacOS

What is the problem?

When using the datepicker with input, the input border does not turn red when it is invalid.

Code snippets

<?php

use function Livewire\Volt\{state};

state('date')->url();
state('other')->url();

$submit = function () {
    $this->validate([
        'date' => 'required',
        'other' => 'required',
    ]);
};

?>

<div>
    <form wire:submit.prevent="submit" class="space-y-6">
        <flux:date-picker
            label="Date"
            wire:model="date"
        >
            <x-slot name="trigger">
                <flux:date-picker.input />
            </x-slot>
        </flux:date-picker>

        <flux:input label="Other" wire:model="other"/>

        <flux:button type="submit" variant="primary">Submit</flux:button>
    </form>
</div>

Just submit the form as is. The datefield input won't be red and the other input will.

How do you expect it to work?

The datepicker input should be red bordered when invalid, just like the other inputs.

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.

[jeffchown]

@lucasromanojf I can reproduce your issue. Good catch.

@joshhanley

[joshhanley]

@lucasromanojf thanks for reporting! I've submitted a PR with a fix for this.

One thing to note though once the PR has been merged and released, your code as it stands still won't show the error border.

This is because Flux has no way to pass internal props to the date-picker.input as it has been passed in via a slot.

So you will also need to add the name attribute to your input and set it's value to the same as the property name you have wire:model the date picker to.

For example, below we are wire:model to the date prop on the date-picker component, so we also need to add name="date" to the date-picker.input component. That should then allow error styles to be shown.

<flux:date-picker label="Date" wire:model="date">
    <x-slot name="trigger">
        <flux:date-picker.input name="date" />
    </x-slot>
</flux:date-picker>

[lucasromanojf]

Great, thanks @joshhanley!