Issue with focus on a toolbar clicked button

[fcollonval]

In the toolbar, when a item is clicked, the event (if propagated) will be used to change the active index (expected behavior). Then if the active index changes, the clicked item is focused through:

fast/packages/web-components/fast-foundation/src/toolbar/toolbar.ts

Line 247 in 6091f89

this.focusableElements[this.activeIndex]?.focus();

That latter behavior can have inconsistent and unexpected result in the following case:

• When a button in the toolbar has a mousedown listener changing the focus to a text area (outside the toolbar).

• If clicking on the button

• The focus is at the end on to the button (unexpected)

• On a second click on the button, the focus is in the text area (expected) because the active index did not change on the toolbar (the snippet above has not been called).

If clicking on another item in the toolbar then back to the button, the case of first click occurs as the active index changes.

So I was wondering if it makes sense to not focus the active element either at all or at lease if the preventDefault was called on the click event.

Of note, most browsers are focusing a button on click. But this can be escaped by calling preventDefault on mousedown event.

Screencast of the issue

[fcollonval]

We are hitting that in jupyterlab/jupyterlab#15021

Work around for now (but it prevents updating the active index and the focusableElements):

https://github.com/jupyterlab/jupyterlab/pull/15021/files#diff-00e4c3dd1d53c87918423484191102bdfda9a86263e410a858ec62b1669bfbe1