Skip to content

fix: (WIP) make sure trackpad taps are not considered as virtual clicks #10225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
LFDanLu wants to merge 2 commits into
base: main
Choose a base branch
from
+113 −1
Draft

fix: (WIP) make sure trackpad taps are not considered as virtual clicks #10225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
374964c
fix: make sure trackpad taps are not considered as virtual clicks
LFDanLu Jun 17, 2026
cbef46e
didnt save?
LFDanLu Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/@adobe/react-spectrum/test/list/ListView.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1225,6 +1225,11 @@ describe('ListView', function () {
});

it("should support single tap to perform row selection with screen reader if onAction isn't provided", async function () {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest
Comment on lines +1228 to +1229

@snowystinger snowystinger Jun 17, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// oxlint-disable-next-line no-unused-vars
using uaMock = jest
using _uaMock = jest

I think this will pass

@LFDanLu LFDanLu Jun 18, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unfortunately still caught by the linter :(

.spyOn(navigator, 'userAgent', 'get')
.mockImplementation(() => 'Android');

let tree = renderSelectionList({
onSelectionChange,
selectionMode: 'multiple',
Expand Down Expand Up @@ -1281,6 +1286,11 @@ describe('ListView', function () {
});

it('should support single tap to perform onAction with screen reader', async function () {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest
.spyOn(navigator, 'userAgent', 'get')
.mockImplementation(() => 'Android');

let tree = renderSelectionList({
onSelectionChange,
selectionMode: 'multiple',
Expand Down
10 changes: 10 additions & 0 deletions packages/@adobe/react-spectrum/test/table/TableTests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3414,6 +3414,11 @@ export let tableTests = () => {
describe('needs pointerEvents', function () {
installPointerEvent();
it("should support single tap to perform row selection with screen reader if onAction isn't provided", function () {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest
.spyOn(navigator, 'userAgent', 'get')
.mockImplementation(() => 'Android');

let onSelectionChange = jest.fn();
let tree = renderTable({onSelectionChange, selectionStyle: 'highlight'});

Expand Down Expand Up @@ -3482,6 +3487,11 @@ export let tableTests = () => {
});

it('should support single tap to perform onAction with screen reader', function () {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest
.spyOn(navigator, 'userAgent', 'get')
.mockImplementation(() => 'Android');

let onSelectionChange = jest.fn();
let onAction = jest.fn();
let tree = renderTable({onSelectionChange, selectionStyle: 'highlight', onAction});
Expand Down
3 changes: 2 additions & 1 deletion packages/react-aria/src/utils/isVirtualEvent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ export function isVirtualPointerEvent(event: PointerEvent): boolean {
// Talkback double tap from Windows Firefox touch screen press
return (
(!isAndroid() && event.width === 0 && event.height === 0) ||
(event.width === 1 &&
(isAndroid() &&
event.width === 1 &&
event.height === 1 &&
event.pressure === 0 &&
event.detail === 0 &&
Expand Down
6 changes: 6 additions & 0 deletions packages/react-aria/test/dnd/dnd.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2882,6 +2882,9 @@ describe('useDrag and useDrop', function () {
});

it('should support clicking the original drag target to cancel drag (virtual pointer event)', async () => {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest.spyOn(navigator, 'userAgent', 'get').mockImplementation(() => 'Android');

let tree = render(
<>
<Draggable />
Expand Down Expand Up @@ -2942,6 +2945,9 @@ describe('useDrag and useDrop', function () {
});

it('should support double tapping the drop target to complete drag (virtual pointer event)', async () => {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest.spyOn(navigator, 'userAgent', 'get').mockImplementation(() => 'Android');

let onDrop = jest.fn();
let tree = render(
<>
Expand Down
85 changes: 85 additions & 0 deletions packages/react-aria/test/interactions/usePress.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1218,6 +1218,9 @@ describe('usePress', function () {
});

it('should detect Android TalkBack double tap', function () {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest.spyOn(navigator, 'userAgent', 'get').mockImplementation(() => 'Android');

let events = [];
let addEvent = e => events.push(e);
let res = render(
Expand Down Expand Up @@ -1311,6 +1314,45 @@ describe('usePress', function () {
]);
});

it('should fire if pressure is 0 but is not android', function () {
let events = [];
let addEvent = e => events.push(e);
let res = render(
<Example
onPressStart={addEvent}
onPressEnd={addEvent}
onPress={addEvent}
onPressUp={addEvent}
onClick={e => addEvent({type: e.type, target: e.target})}
/>
);

let el = res.getByText('test');
fireEvent(
el,
pointerEvent('pointerdown', {
pointerId: 1,
width: 1,
height: 1,
pressure: 0,
detail: 0,
pointerType: 'mouse'
})
);
fireEvent(
el,
pointerEvent('pointerup', {
pointerId: 1,
width: 1,
height: 1,
pressure: 0,
detail: 0,
pointerType: 'mouse'
})
);
expect(events).not.toEqual([]);
});

it('should not fire press/click events for disabled elements', function () {
let events = [];
let addEvent = e => events.push(e);
Expand Down Expand Up @@ -5038,6 +5080,9 @@ describe('usePress', function () {
});

it('should detect Android TalkBack double tap', function () {
// oxlint-disable-next-line no-unused-vars
using uaMock = jest.spyOn(navigator, 'userAgent', 'get').mockImplementation(() => 'Android');

const shadowRoot = setupShadowDOMTest({onPressChange: null});

const el = shadowRoot.getElementById('testElement');
Expand Down Expand Up @@ -5111,6 +5156,46 @@ describe('usePress', function () {
]);
});

it('should fire if pressure is 0 but is not android', function () {
let events = [];
let addEvent = e => events.push(e);
let res = render(
<Example
onPressStart={addEvent}
onPressEnd={addEvent}
onPress={addEvent}
onPressUp={addEvent}
onClick={e => addEvent({type: e.type, target: e.target})}
/>
);

let el = res.getByText('test');
fireEvent(
el,
pointerEvent('pointerdown', {
pointerId: 1,
width: 1,
height: 1,
pressure: 0,
detail: 0,
pointerType: 'mouse'
})
);
fireEvent(
el,
pointerEvent('pointerup', {
pointerId: 1,
width: 1,
height: 1,
pressure: 0,
detail: 0,
pointerType: 'mouse'
})
);

expect(events).not.toEqual([]);
});

it('should not fire press/click events for disabled elements', function () {
const shadowRoot = setupShadowDOMTest({
isDisabled: true,
Expand Down