Bug 299087
| Summary: | Input type range does not emit events focus, blur, focusin and focusout when interacting with mouse. | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Niklaus Hug <register> |
| Component: | Forms | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | akeerthi, ap, cdumez, karlcow, webkit-bug-importer, wenson_hsieh |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | 22261 | ||
| Bug Blocks: | |||
Niklaus Hug
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
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
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
<rdar://problem/161325855>