Screencast
Steps to replicate the issue (include links if applicable):
- Go to https://commons.wikimedia.org/wiki/Special:UploadWizard
- Select any media to upload
- Click Continue
- Click "This is my own work"
- Click "I generated this work using an artificial intelligence tool"
- Type anything
- Try to put the caret to the middle of what you typed
What happens?:
The caret doesn't change its position.
What should have happened instead?:
It should.
Other information (browser name/version, screenshots, etc.):
Chrome, Firefox.
My investigation:
Since I'm developing a similar upload functionality for Convenient-Discussions, I decided to dig into this.
The bad behavior comes from OO.ui.SelectWidget.prototype.onMouseDown which prevents clicks from propagating. Basically, if we do this.$element.off( 'mousedown' ) in the constructor of OO.ui.RadioSelectWidget, everything would normalize, since option clicks would be handled by the onFocus method instead. (I didn't find any differences in behavior or visual effects, but I won't vouch that nothing stopped working as it should.)
The only reason the input is even focusable at all is the workaround added by @mfossati (see the code) with a comment "I have not fully figured out exactly why or what is the culprit, but it appears that some node is preventing clicks from propagating, and it's making it impossible to access this input by mouse".
In general, given RadioSelectWidget's treatment of mouse clicks, it doesn't seem to be designed for use with additional widgets inside its option widgets, and in UploadWizard you even have a nested radio select in there. So when I press and hold any radio button of the nested select, the outside radio button becomes active as well:
(This should be because the label tag is used as $element for option widgets.)
Another problem here (which I'm too lazy to file a separate task for) is that text of the options is not selectable by the user. Interfering with standard capabilities provided by browsers is not good. I'll just state that this selection blocking comes from the triggering of the focus event in OO.ui.SelectWidget.prototype.onFocus that @matmarex has introduced a long time ago. As soon as I change $focusOwner to $(), I can select text as normal. This focus event triggered on $focusOwner seems to prevent the browser from proceeding with selecting text.
Related tasks
T347755