jimohalloran
commented
3 years ago Oro have confirmed (https://orocommunity.slack.com/archives/C11N3EXRS/p1620750786093800?thread_ts=1620715495.088600&cid=C11N3EXRS) that this is a bug, the internal ticket ID is BB-20605.
Summary
The default behaviour for a HTML based web app is to highlight the contents of a field when tabbing into it so the value can be replaced easily. This is what I (and my users) expect Oro to do as a standard web application. However, since 4.1.11 (or 12, hard to tell), when I tab between fields the cursor moves as expected, but any existing value is not highlighted. I'd like the default highlight behaviour to be restored.
Steps to reproduce
Open a form with multiple text fields. Enter values into each. Click on the first text field to give it focus. Then hit tab to move to the next. Note how the cursor moves but the text content is not selected.
Actual Result When I tab between fields, the cursor moves as expected, but the value is night selected.
Expected Result
When I tab between fields, the cursor should move to the next field, and any value in that field should be selected to allow quick/easy over typing to replace the value. You can see the default behaviour here: https://getbootstrap.com/docs/4.0/components/forms/#sizing and note how the existing value is highlighted when you tab between fields.
Details about your environment
Additional information
I can see the default behaviour (existing value is highlighted on focus) on a dead simple HTML form without any JS that I create in a file and open in the browser. I can also see it in the sample forms in the Bootstrap docs. So I'm confident that the latest Chrome releases haven't changed the default. I can repro on both my own custom forms, and standard forms like customers. I can also repro in the OroCRM online demo, so it's not related to anything I've customised.
Digging into the issue further it seems to be caused by an OroUI component (https://github.com/oroinc/platform/blame/master/src/Oro/Bundle/UIBundle/Resources/public/js/app/modules/ignore-tabbable.js) which is manually managing focus in response to tab key presses. If I use devtools to remove this listener from a form element, the normal focus behaviour works as expected.
I'm guessing the lack of highlight is due to this code setting focus on the new control then preventing the default behaviour without manually highlighting the content?
It does seem like this would have been an Oro 4.1.11 or 4.1.12 change though from the dates, although I can't really find anything in the release notes to confirm that.
Which I guess leaves two questions. Why does this thing exist? And how do I either disable it, or fix it so I still get the default browser behaviour I expect?