adobe / adobe/react-spectrum

Use `null` instead of `Number.NaN` in NumberField component

Open
#6,971 5 comments 9 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

Replace use of `Number.NaN` values in the NumberField component with `null`. This would also enable passing in `null` to the NumberField which was requested in: #5524.

### 🤔 Expected Behavior?

The expected behavior is that one must check for `null` before interacting with values returned by a NumberField. This isn't extra work, because one must *already* call `Number.isNaN()` when handling number values.

Why is `Number.NaN` less desirable? Because:
* TypeScript doesn't error if a developer forgets to check for NaN
* TypeScript can't determine whether a NaN check was already performed (extra unnecessary checks)
* Serializing a NaN to JSON resolves to a `null` value anyway

### 😯 Current Behavior

All values from a NumberField component need to be checked for `Number.isNaN()`.

### 💁 Possible Solution

_No response_

### 🔦 Context

I observe most of my team members override `onChange` and `value` properties to support `null` instead. This leads me to think that the DX of the NumberField component isn't quite right. Developers don't expect a number to not be a number and TypeScript doesn't warn about it.

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start at the NumberField component and trace its value and onChange types, including the existing Number.NaN handling. Update the component so null is accepted and returned instead, then verify that NumberField no longer exposes NaN values and that the requested null behavior works consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.