[FIX] topbar: close font size editor dropdown and focus grid #7495
Conversation
Pressing Tab in the font size editor could move focus to the hidden “add more rows” footer. The browser then auto-scrolled to the footer while the grid viewport state stayed unchanged, making the footer appear floating above the grid. The font size editor now closes its dropdown when it loses focus (blur/Tab), and focus is redirected back to the grid instead of going to the footer, preventing the layout from breaking when tabbing from the toolbar. Task: 5263792
|
|
| input.focus(); | ||
| await nextTick(); | ||
| expect(fixture.querySelector(".o-dropdown-content.o-text-options")).toBeTruthy(); | ||
| input.blur(); |
There was a problem hiding this comment.
I think jsdom doesn’t implement real Tab-based focus navigation, so we call blur() directly here to reliably trigger the blur handler in this test.
| const isOpen = this.dropdown.isOpen; | ||
| if (!isOpen) { | ||
| this.props.onToggle(); | ||
| this.inputRef.el!.focus(); |
There was a problem hiding this comment.
why remove this ? don't we want the input focused when clicking on the arrow ?
There was a problem hiding this comment.
Actually, if we keep the font editor input focused when clicking the arrow, the dropdown becomes impossible to close.
When we click the arrow to close it, the input first triggers a blur event (which closes the dropdown), and then the click handler on the arrow runs and opens it again. Since blur happens before click, the two handlers cancel each other out.
I tried the mousedown event as well (as it is called before the blur), but then we need to replace all the click events with mousedown in this component. I am not sure if that is good or not.
If we really want the focus on the font editor input, then I guess better to remove the blur handler and directly handle the Tab event inside the component? What do you think? Let me know if you have a better approach
3 participants
Description:
Pressing Tab in the font size editor moves focus to the hidden “add more rows” footer (the next focusable element in the DOM). This caused the browser to auto-scroll to the footer while the grid viewport state remained unchanged, making the footer appear to float over the grid.
Now, when the font size editor loses focus (via blur/Tab), it closes its dropdown and redirects focus back to the grid instead of the footer.
Task: 5263792
review checklist