Interactivity API: shiftKey not pressed in pointer events, when keyboard('{Shift>}') is active

[gossi]

Describe the bug

Happy to switch to the new interactivity API (my code predates that API).

I'm doing a multi-select for a composite aria widget, so when holding down shift key and click an item, it will be selected.

Here is my idea to write the test code, as suggested at testing-library:

const user = userEvent.setup();
await user.keyboard('{Shift>}');
await user.click(thirdItem);
await user.keyboard('{/Shift}');

my code registers a pointerup event, which has this check:

handlePointer(event: PointerEvent, item: Item) {
  if (event.shiftKey) {
    this.selectShift(item);
  }

  // ...
}

but when logging the "click" event, the shiftKey property is set to false.

Reproduction

Currently working on a public PR:

• Use vitest interactivity API hokulea/aria-voyager#258
• Tree 09cb308

Code:

• Failing test
• Code

you might wanna put a console.log()/breakpoint at that function.

Setup:

• checkout repo above
• pnpm install
• cd packages/aria-voyager
• pnpm test:ui
• failing test is tests/listbox/navigation/focus/with-multi-selection.test.ts

System Info

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 67.67 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.10.0 - ~/.local/share/mise/installs/node/22/bin/node
    npm: 10.9.0 - ~/.local/share/mise/installs/node/22/bin/npm
    pnpm: 9.13.2 - ~/.local/share/mise/installs/node/22/bin/pnpm
    Watchman: 2024.07.08.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 103.1.41.100
    Chrome: 131.0.6778.86
    Edge: 124.0.2478.51
    Safari: 17.5
  npmPackages:
    @vitest/browser: ^2.1.8 => 2.1.8
    @vitest/coverage-istanbul: ^2.1.8 => 2.1.8
    @vitest/ui: ^2.1.8 => 2.1.8
    vite: 5.4.11 => 5.4.11
    vitest: ^2.1.8 => 2.1.8

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

It looks like you are using provider: "preview" and that mostly uses testing-library's event emulation inside js under the hood, so the issue might be there.

Can you try provider: "playwright" and see if it works? Also would be great to have a minimal repro as it's hard to get into the entire repository.

[gossi]

Thanks for the response. I did a quick check for three providers:

• preview: not working
• webdriverio: not working (error is some selector is wrong)
• playwright: actually works

I'm using wdio for CI and preview for development mode.

I will work on a smaller repro case.

[gossi]

I made a minimal repro case over here: https://github.com/gossi/repro-vitest-interactivity-api

It only happens for preview provider, I added tests for wdio and playwright.

I checked for {Shift>} key in particular, but that is an indicator, that control, option and meta key might also be affected.

[sheremet-va]

I made a minimal repro case over here: gossi/repro-vitest-interactivity-api

It only happens for preview provider, I added tests for wdio and playwright.

I checked for {Shift>} key in particular, but that is an indicator, that control, option and meta key might also be affected.

The global userEvent uses locators under the hood, and the preview locator always uses the global userEvent from testing-library:

vitest/packages/browser/src/client/tester/locators/preview.ts

Line 61 in a11d565

return ensureAwaited(() => userEvent.click(this.element()))

This is a bug