The DateTimePicker does`t show the time box on Firefox browser, same as issue 13428

[sumariva]

Package

filament/filament

Package Version

v3.2

Laravel Version

v11.36.1

Livewire Version

v3.5.12

PHP Version

PHP 8.3.14

Problem description

Expected the time picker render the same way as on Chrome browser.

Below, Firefox, no console errors, but no picker:

Firefox 133.0.3 (64-bits), windows.

Expected behavior

Just the timer picker with the push button at right. Also, would be nice, to anchor the near the push button, or have some sort of option to allow this.

Steps to reproduce

We just created an field. The following is the code for that part of form:

Section::make(__('Date'))
  ->columnSpan(1)
  ->schema([
      DatePicker::make('date')
          ->label(__('Date'))
          ->default(now())
          ->required(),
      TimePicker::make('time')
          ->label(__('Time'))
          ->seconds(false)
          ->displayFormat('H:i')
          ->default(now())
          ->required(),
  ]),

Reproduction repository (issue will be closed if this is not valid)

trying to mount a simple project

Relevant log output

No response

[github-actions]

Hey @sumariva! We're sorry to hear that you've hit this issue. 💛

However, it looks like you forgot to fill in the reproduction repository URL. Can you edit your original post and then we'll look at your issue?

We need a public GitHub repository which contains a Laravel app with the minimal amount of Filament code to reproduce the problem. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private / confidential, since we want a link to a separate, isolated reproduction. That would allow us to download it and review your bug much easier, so it can be fixed quicker. Please make sure to include a database seeder with everything we need to set the app up quickly.

[github-actions]

Thank you for providing reproduction steps! Reopening the issue now.

[ghsgabriel]

same here +1

[danharrin]

Is this really something Filament can fix? Are time pickers supported in Firefox?

The alternative is to use ->native(false) on the picker so you can use Filament's JS-driven one.

[sumariva]

Yes, Firefox have a control for this input time. References:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

But the strangest thing is that filament implementation removes the button on right, when enabling the ->native(false).

I wish we could have the option on filament to attach the popup time picker to the button, so the picker would open near it.
The same way when you use an absolute element inside a parent relative one.

With relation about the ->native call, this should be addressed by filament people recomendations.
If filament aims to be cross browser, then the default should be native off and use the supported built-in implementation.