Date picker - Mobile - Shows native calendar and Flux calendar depending on where you click

[0hra]

Flux version

v2.0.0

Livewire version

v3.5.19

Tailwind version

v4.0

What is the problem?

iOS + Safari
If I click on the input field it shows the native calendar. If I click on the calendar-icon it shows the Flux calendar.
See attached video.

date.picker.2.mov

Code snippets

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

How do you expect it to work?

Show only Flux calendar, not the native one.

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]

@0hra Same thing happens for me.

[calebporzio]

Agreed, odd. But actually kind of makes sense that it's happening given that the input is type="date".

So what is expected behavior here for mobile?

A) Disable Flux's date picker for the input trigger and just let the mobile one get triggered?
B) Somehow like expand the Flux date picker trigger target area on mobile to fill the entire input so that only Flux's gets triggered?

Hoping that makes sense? Open to other options as well.

[jeffchown]

@calebporzio I think if I explicitly used a flux:date-picker in my code, then I'd expect/opt-for B

[0hra]

Yep, option B all the way.