dart-pad
dart-pad copied to clipboard
dart-lang
Cannot focus on text after pressing TAB
I press Tab while editing code, and the "(+) New" button above gets highlighted.
That's already problematic, because I might want to use tab to indent, and losing focus is unexpected.
I press escape, as I normally would to exit a "menu". It does nothing, because I never actually lost focus. If I press letter keys, they are written into the text area, but if I press return or space, I select whatever is highligted above. This "half focus lost" mode is very confusing. It took me a while to figure out exactly what was happening.
So I use the mouse and click in the text editing area, which I would expect to focus on the text area. Again, this isn't focus, so it does nothing.
The only thing that works is to press shift+Tab to get the highlight back onto the text area.
Same error here. It is very confusing as there is very little indication that the focus has shifted to another item on the page. The only way DartPad is at all usable right now is to never hit the 'Tab' key at all. Once you do, you have to use tab or shift-tab to restore focus. Even clicking inside the editor does not sufficiently restore focus.
When I'm typing in the editor and press Tab, the focus leaves the editor and goes first to the "New" button, etc. I almost never notice the focus change and therefore when I press space something unexpected often happens like the dropdown menu for the "New" button or the page for "Install SDK" opens, it's incredibly frustrating and this is a P1 issue that has been idling for 2 weeks now.
I'm having a little trouble reproing this myself. Perhaps it happens on some browsers and not others?
If you're seeing this issue, you might post your browser+version in a comment; thanks in advance.
Chrome / 122.0.6261.94
--
(edit: I am able to repro the issue now)
Brave Version 1.63.165 Chromium: 122.0.6261.94 EDIT: I can also reproduce on Microsoft Edge Version 122.0.2365.63
To reproduce:
- Load dartpad.dev
- Click into the text editor
- Press Tab
- Observe how it does not indent code, but rather starts navigating the website
I can reproduce the problem on the following browsers on an M2 Mac: Firefox 123.0 64-bit Safari 17.3.1 Chrome 122.0.6261.69 (Official Build) (arm64)
and on an older PC: Microsoft Edge 122.0.2365.52 (Official Build) (64-bit)
Click in editor, press "tab." Now you can type abc, but spacebar activates a menu.
This is a deal-breaker for me; I can't use DartPad with this going on! I would prefer "tab" trigger auto-formatting, or it could indent the current line, or insert two spaces, or do nothing. Or (depending on your fine-grained accessibility opinions), if it has to tab out of the editor, then make the editor actually lose focus.
CodeMirror intentionally does not bind "tab" by default, but developers using CodeMirror are free to bind it, as described here: https://codemirror.net/examples/tab/
Maybe it sounds extreme, but I discovered this jankiness within about five seconds of using DartPad for the first time, and it really colored my perception of the site. This seems to be the main Dart playground, too.
I see in #2921 a proposed fix to restrict focus traversal, thanks! That said, I'm curious, are there other ways to loose focus other than Tab and Shift+Tab? If so, will the fix address recovering focus back to the text area?
I was accidentally in the state described here, but wasn't sure how I got in that state, so I didn't know how to get out of it. In my case, the channel selection button was on focus, and I thought it was due to me clicking around them before. Unlike what @lrhn described in the first comment, clicking on the text area left me in a surprising hybrid state: typing characters worked, but when I pressed the Space+Bar, then it wouldn't show up in code mirror, but instead the selected menu would open :open_mouth:!!
