Bug: Input don't send "select" events when type is "email"

[Sharcoux]

React version: reproduced on 17 and 18

Steps To Reproduce

1. Create an input like this: <input text="move the selection around" onSelect={console.log} type="email" />
2. Move the selection around and see that onSelect is emitted only on focus and blur. Notice that you get normal behavior if you remove the type

Link to code example:

https://codesandbox.io/p/sandbox/recursing-kilby-z6h9dz?file=%2Fsrc%2FApp.js%3A15%2C1

The current behavior

Does not emit "select" events

The expected behavior

Should emit the "select" events

[kevinuehara]

I think it's not a React bug, but rather a limitation of HTML and DOM behavior. The onSelect event is designed for text inputs, and the HTML specification does not define this event for email-type inputs. Therefore, React behaves according to this specification.

If you are facing a specific case where you need to select text in an email input, the solution would be to use an input of type text with validation to ensure that the value is a valid email. This way, you can use onSelect and other events normally.

[Sharcoux]

Hum... It might be. That's totally stupid, though. Why would you not need to listen to the selection position on email inputs specifically?

Anyway, if that's the cause and React cannot handle this in another way, then we should probably update @types/react to not let you use onSelect on input if the type is "email", no?

[rjgotten]

I think it's not a React bug, but rather a limitation of HTML and DOM behavior. The onSelect event is designed for text inputs, and the HTML specification does not define this event for email-type inputs. Therefore, React behaves according to this specification.

With native events this actually just works on type="email" fields.

Also, the select event is not limited to any particular type value on input elements.
It isn't even limited to just input elements. It formally applies to anything classified as a 'form control' and its description states that it is "fired at form controls when their text selection is adjusted (whether by an API or by the user)"

https://html.spec.whatwg.org/multipage/indices.html#event-select

So React actually behaves counter to specification if it only raises this on <input type="text" />.
It should also raise it on <input type="email" />. It should also raise it on <textarea>. Etc.

If you are facing a specific case where you need to select text in an email input, the solution would be to use an input of type text with validation to ensure that the value is a valid email.

type="email" is the validation, though. Or at least is supposed to be - if you're not dead-set on reinventing the square wheel ...

[RioChndr]

I'll try to answer this bug, I don't know is this a bug or what, I understand this issue focus on how consistent reactjs to js API, but I'll try little hacky way to achieve this expectation of behaviour, I use useRef instead direct onSelect={} to use element API. It works as expected, I solve that in this sandbox code.