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

Most upvoted comments

@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 😃