inferno: onChange/onInput not working for radio or number inputs
It’s a common design pattern to hide radio/checkbox inputs via css, and style their labels instead. Interacting with the label will change the input, whether through mouse clicking or keyboard navigation. I’ve built dozens of such inputs in React, with events on the ‘hidden’ input firing correctly.
Nothing I do is working with Inferno. Neither onChange nor onInput events on the input are firing at all in response to either mouse or keyboard events. onFocus fires correctly for both mouse and keyboard input.
Here’s what the jsx looks like:
<label htmlFor={id}>
<input
type='radio'
id={id}
name={name}
checked={checked}
onChange={({target}) => console.log('change', target.checked)} // never fires
onInput={({target}) => console.log('input', target.checked)} // never fires
onFocus={() => console.log(name)} // fires correctly
/>
{label}
</label>
I’m having a similar issue with a controlled number input. It fires onKeyup events, but never fires onInput or onChange. Sadly, the event returned by onKeyup is completely useless, as the target.value is reporting the value prior to the key press… which is initially an empty string, and so it never changes. Here’s what the JSX looks like for that input:
<label htmlFor={id}>
<input
id={id}
name={name}
value={value}
onChange={({target}) => console.log('change', target.value)} // never fires
onInput={({target}) => console.log('input', target.value)} // never fires
onKeyup={({target}) => console.log('keyup', target.value)} // returns empty string
onFocus={() => console.log(name)} // fires correctly
onClick={({target}) => { target.select() }}
type='number'
pattern='[0-9]+([,\.][0-9]+)?'
inputMode='numeric'
min={minimum}
/>
</label>
I had suspicions that the lack of normalised events would be the deal-breaker for Inferno for me, but I had no idea it would be this buggy.
I’m developing in chrome fwiw.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 20 (11 by maintainers)
Commits related to this issue
- Fix inferno-compat bug with radio buttons onChange event. #864 — committed to infernojs/inferno by deleted user 7 years ago
@DimitarChristoff if you can attempt a PR, it’s likely related to these lines:
https://github.com/infernojs/inferno/blob/master/packages/inferno-compat/src/index.ts#L100
Thanks 😃