adobe / adobe/react-spectrum

Input onChange does not expose native event

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

Description

# 🐛 Bug Report

Input onChange does not expose native event. This is bad as it does not enable access to the native event which ultimately allows for complex cursor tracing when formatting text fields.

## 🤔 Expected Behavior

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/textfield/src/useTextField.ts#L141

This ^^^ should be passing e instead of `e.target.value`. As this would be huge breaking change. I suggest you simply pass `e` as a second parameter so users can use it.

## 😯 Current Behavior

Native `e` event is not passed

## 💁 Possible Solution

I suggest you simply pass `e` as a second parameter so users can use it.

```js
onChange: (e: ChangeEvent) => onChange(e.target.value, e),
```

## 🔦 Context

I am unable to do cursor tracking to format user input.

https://teslamotors.github.io/informed/?path=/story/formatting--number-formatter

Above is example of where compex cursor tracking is used when formatting input fields.

Contributor guide

Open the contributing guide

Research direction

Start at packages/@react-aria/textfield/src/useTextField.ts around line 141, where the input change handler currently passes only e.target.value. Preserve the existing value argument while exposing the native event as a second callback argument, and verify that the resulting onChange behavior matches the issue's requested API.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.