NEW299087
Input type range does not emit events focus, blur, focusin and focusout when interacting with mouse. 
https://bugs.webkit.org/show_bug.cgi?id=299087
Summary Input type range does not emit events focus, blur, focusin and focusout when ...
Niklaus Hug
Reported 2025-09-18 06:47:11 PDT
After a click on <input type="range"> the input should be focused. I also would like to see an outline and use keyboard interactions (e.g. 'ArrowRight' and 'ArrowLeft' to change the value). <input type="range"> is still a target for keyboard interaction 'Tab'. Unlike in Chrome (v140) and Firefox (v142.0.1) this is not the case in Safari (v 18.6). Currently I use subsequent workaround: <input @click="${this.focusRangeInput}" type="range" /> private focusRangeInput() { this.inputAsRangeEl.focus(); } May use https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input to see the issue.
Attachments
Add attachment proposed patch, testcase, etc.
Alexey Proskuryakov
Comment 1 2025-09-18 14:01:02 PDT
Thank you for the report. What exactly suggests to you that it should be focused, is it just that Chrome and Firefox do it? I don't know if there is something special about range, however this sounds like another case of bug 22261, which is actually a bug in Chrome and Firefox on macOS.
Niklaus Hug
Comment 2 2025-09-18 23:31:44 PDT
Having a consistent API over all browsers is a fair part of my need. Currently I implement a slider which consist of a `<input type="range">` and a `<input type="text">` and `<label>`. The text input is only shown if either one input is focused. I bind event handlers to `focusin` and `focusout` on a common parent element to track the state `showTextInput`. I would like to use this pattern also on Safari, but the additional step of executing method `focus()` is required (see comment 2025-09-18 06:47:11). I suggest: 1. `<input type="range">` must emit event `focus`, `blur`, `focusin` and `focusout`. 2. `<input type="range">` should show an `outline`. Leastwise if a range input was clicked it is the starting point for tabbing through form fields (keypress `Tab`). Sidenote: I adapted the title from `Input type range is not focused after click.` to `Input type range does not emit events focus, blur, focusin and focusout`.
Radar WebKit Bug Importer
Comment 3 2025-09-25 06:49:09 PDT
<rdar://problem/161325855>
Note You need to log in before you can comment on or make changes to this bug.