microsoft / tabster

Web Application Keyboard Navigation Tools

Home Page:https://tabster.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Race condition between deloser creation and focusing

ling1726 opened this issue · comments

Repro: https://codesandbox.io/s/priceless-meninsky-wi9rje?file=/example.tsx

  1. Focus 'Root trigger' button
  2. Press Enter
  3. 'Open popover' button should be focused
  4. Press Enter
  5. Press Escape
  6. Focus is on the 'Root trigger' button

The problem here is that once the popover opens, the first focusable element (which is a deloser) is focused before the deloser can be created.

This means that the deloser on the first button can never be added to the deloser history

tabster/src/Deloser.ts

Lines 173 to 180 in 3c29b31

process(element: HTMLElement): Types.Deloser | undefined {
const ctx = RootAPI.getTabsterContext(this._tabster, element);
const rootUId = ctx && ctx.root.uid;
const deloser = DeloserAPI.getDeloser(this._tabster, element);
if (!rootUId || !deloser) {
return undefined;
}

To follow the happy path and avoid the race condition, simply tab to the next button after 'Open popover' in steap 2 and shift tab back to 'Open popover'. This time the deloser is already created so the process will add it to deloser history