🐛 Bug Report

Passing along a report from @mattrothenberg who is using the VS Code toolkit React components in the GitHub Next Flat Editor extension. (Matt if I miss anything in this bug report feel free to chime in and add details).

The short version is that he's run into an issue where the onChange event handler is firing at incorrect times based on React event standards (which, to be clear, stray from native change event standards).

In React land, this event should fire for every keystroke in the text field. However, this event is only firing when blurring away from the focused input (which, again, correctly follows the native change event standard).

The hope is that there might be some way to adjust the behavior of onChange when defining/using the React-based toolkit components while keeping the regular/default change event behavior in the toolkit web components?

💻 Repro or Code Sample

// Change event follows native standards and only fires when component loses focus
// This strays from React conventions where onChange should fire on every keystroke
<VSCodeTextField onChange={handleChange}></VSCodeTextField>

🤔 Expected Behavior

When wrapped in the fast-react-wrapper, fast foundation components should adjust the behavior of the onChange/change event to follow the conventions of React.

😯 Current Behavior

When wrapped in the fast-react-wrapper, fast foundation components follow the behavior of the native change event.

💁 Possible Solution

Matt discovered there's a solution of using the onInput event to achieve the desired result of "fire event on every keystroke." If needed we're happy to just document this reality and tell people to use onInput instead of onChange.

// This achieves the behavior expected of the onChange event
<VSCodeTextField onInput={handleChange}></VSCodeTextField>

🔦 Context

🌍 Your Environment

n/a (if needed Matt can provide info)