livewire / livewire/flux

Clicking the selected day in a single-mode date picker clears the value (wire:model becomes null)

Open
#2,836 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Blade
Stars
977
Forks
112
Avg merge
1d 4h
Merged PRs (30d)
21

Description

### Flux version

v2.20.0

### Livewire version

v4.4.4

### Tailwind version

v4.3.3

### Browser and Operating System

Chrome 146 on Linux (not browser-specific, the behaviour is in Flux's JS)

### What is the problem?

In single mode, clicking the day that is already selected in `flux:date-picker` unselects it and sets the bound property to `null`. This happens without `clearable`, it is not documented, and it is easy to trigger by accident: users click the highlighted day to confirm it or to close the popover.

Code that expects a date then receives `null`. In our case a typed `public string $date` property on a component further down the page threw `TypeError: Cannot assign null to property ...::$date of type string` in production.

The toggle is hard-coded in `SingleSelection.select()` (`dist/flux.js`, line 8373 in v2.20.0):

```js
select(date) {
if (this._date.isSameDay(date)) return new NoneSelection2();
return new _SingleSelection(date);
}
```

There is also no way to block it from userland. The calendar dispatches `select` with `cancelable: true`, but by then the selection has already changed, and `_controllable.dispatch()` runs right after it without checking `defaultPrevented`:

```js
this.dispatchEvent(new Event("select", { bubbles: false, cancelable: true }));
this._controllable.dispatch();
```

The same selection code backs `flux:calendar`.

### Code snippets to replicate the problem

```blade


Value: {{ json_encode($date) }}


```

1. Load the page. The picker shows 31 Jul 2026 and the text reads `Value: "2026-07-31"`.
2. Open the picker and click 31, the highlighted day.
3. The picker empties and the text reads `Value: null`.

With `public string $date` instead of `?string`, step 2 throws a `TypeError`.

### Screenshots/ screen recordings of the problem

_Company data prevents me from showing a live screenshot/recording._

### How do you expect it to work?

Clicking the already-selected day in single mode should leave it selected, the same as picking any other day. Clearing should only happen through the explicit `clearable` button.

If the toggle is intentional, could it be opt-out, for example with a prop, or could `preventDefault()` on the cancelable `select` event actually cancel the change? Right now we guard against `null` in the component's `updated` hook.

### Please confirm (incomplete submissions will not be addressed)

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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in dist/flux.js at SingleSelection.select() around line 8373, then trace the flux:date-picker and flux:calendar selection flow through the cancelable select event and _controllable.dispatch(). Reproduce the single-mode case from the issue and add coverage for clicking the selected day. Done means the selected date remains bound and clearing still requires the explicit clearable control.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.