adobe / adobe/react-spectrum

DateField/TimeField are broken when full-width chatacter is input.

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

Description

# 🐛 Bug Report

![image](https://user-images.githubusercontent.com/15242484/201310502-52a48e85-d12d-4076-8328-b63c372b0349.png)
https://codesandbox.io/s/recursing-meadow-20eibw?file=/src/App.js

Input a fullwidth character like `あ` for each field after `new Time(11, 11)` is set for TimeField.

## 🤔 Expected Behavior

DateField/TimeField should ignore full-width input like NumberField

## 😯 Current Behavior

When I input full-width characters, the values displayed on the field seem to stop working.

## 💁 Possible Solution

Is there a workaround to exclude non-numeric values on the DateField/TimeField?

## 🔦 Context

I tried to use `onKeyDown/onKeyUp` events to prevent users from full-width characters input, but these events are not working?

## 💻 Code Sample

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | 3.22.0
| Browser |
| Operating System |

## 🧢 Your Company/Team

## 🕷 Tracking Issue (optional)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.