adobe/react-spectrum

Unit in NumberField cannot be deleted (for some units/ unit-displays)

Open

#2,806 opened on Feb 4, 2022

View on GitHub
 (10 comments) (0 reactions) (0 assignees)TypeScript (1,500 forks)auto 404
bughelp wanted

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

Description

🐛 Bug Report

I am using the useNumberField with the "formatOptions" option to add units to the number fields.

Using the following option works fine:

formatOptions={{
    style: "unit",
    unit: "gram",
}}

But when I am using the "milliliter" unit, the unit's letters cannot be deleted (by pressing the backspace or the delete key).

formatOptions={{
    style: "unit",
    unit: "milligram",
}}

When using unitDisplay="long only the last letter can be deleted.

🤔 Expected Behavior

Pressing the backspace or the delete key should delete unit's letters inside the input.

😯 Current Behavior

Pressing the backspace or the delete key does not always delete the unit's letters inside the input.

💁 Possible Solution

🔦 Context

💻 Code Sample

Codesandbox reproduction

Go to the codesandbox and focus one NumberField after another to see which letters of which units can be deleted and which cannot.

🌍 Your Environment

Software Version(s)
react-spectrum 3.9.0
Browser
Operating System

Contributor guide

Research direction
Examine the unit parsing logic in NumberField, focusing on how units like 'milligram' and 'milliliter' are handled during keypress events.
Tech stack
typescriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
ReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75