arqex / arqex/react-datetime

Bug: Years view shows stale enabled/disabled years after isValidDate rules change

Open
#880 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
858
PR merge metrics
No merged PRs in 30d

Description

## Bug: Years view shows stale enabled/disabled years after `isValidDate` rules change

**Package:** react-datetime **v3.3.1**

### Description

In v3.3.1, `YearsView` caches per-year disabled state in `disabledYearsCache` the first time it evaluates `isValidDate` (`isDisabledYear` in `src/views/YearsView.js`). That cache is never cleared for the lifetime of the `YearsView` instance.

When validation rules change at runtime (e.g. min/max date range, weekend rules, or other logic inside `isValidDate`), the years view can continue to show outdated enabled/disabled years because cached results are returned without re-calling `isValidDate`.

Note: `DateTime.componentDidUpdate` does not watch `isValidDate`, so changing the prop alone does not invalidate this cache.

`MonthsView` recalculates on each render; this issue appears specific to the years view cache.

### Steps to reproduce

1. Render `` and open the years view.
2. Observe which years are disabled.
3. Update validation rules (e.g. change allowed date range) and pass `isValidDate={validatorB}` (or the same stable callback whose logic now uses new data).
4. Open the years view again — disabled years may still reflect the old rules.

### Expected behavior

The years view should reflect the current `isValidDate` rules after they change.

### Actual behavior

Cached year disabled state persists until `YearsView` is unmounted (e.g. full component remount via React `key`).

### Proposed solutions

**Option 1 — Imperative API (similar to `navigate()` / `setViewDate()`)**

Expose a ref method (e.g. `clearDisabledYearsCache()`) that clears `disabledYearsCache`, so consumers can invalidate explicitly when their validation rules change without remounting the entire picker.

**Option 2 — Automatic invalidation when `isValidDate` changes**

Clear or refresh the cache in `YearsView` when `isValidDate` changes (e.g. in `componentDidUpdate`).
*Note:* If consumers use a stable function reference with changing closure data, reference equality alone may not be enough; we could document that a new function reference or an explicit clear/remount is required, or consider an optional `validationKey` prop for semantic invalidation.

I'm happy to implement either approach and open a PR. Happy to follow whichever direction the maintainers prefer.

Contributor guide

Open the contributing guide

Research direction

Start in src/views/YearsView.js by reading isDisabledYear and disabledYearsCache, then compare the recalculation behavior in MonthsView and the update handling in DateTime.componentDidUpdate. Confirm the chosen invalidation approach with maintainers; done means changing isValidDate rules makes the years view show current enabled and disabled years without requiring a full remount.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.