Skip to content

fix: pointer events evaluation #1395

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

Merged
merged 2 commits into from
May 2, 2023
Merged

fix: pointer events evaluation #1395

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
31b8e3e
chore: add test
mdjastrzebski Apr 27, 2023
01049da
fix: check pointer events only on host elements
mdjastrzebski Apr 27, 2023
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
89 changes: 41 additions & 48 deletions src/__tests__/fireEvent.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,115 +254,108 @@ test('should not fire on non-editable TextInput with nested Text', () => {
expect(onChangeTextMock).not.toHaveBeenCalled();
});

test('should not fire on none pointerEvents View', () => {
const handlePress = jest.fn();

test('should not fire inside View with pointerEvents="none"', () => {
const onPress = jest.fn();
const screen = render(
<View pointerEvents="none">
<Pressable onPress={handlePress}>
<Pressable onPress={onPress}>
<Text>Trigger</Text>
</Pressable>
</View>
);

fireEvent.press(screen.getByText('Trigger'));
expect(handlePress).not.toHaveBeenCalled();
expect(onPress).not.toHaveBeenCalled();
});

test('should not fire on box-only pointerEvents View', () => {
const handlePress = jest.fn();

test('should not fire inside View with pointerEvents="box-only"', () => {
const onPress = jest.fn();
const screen = render(
<View pointerEvents="box-only">
<Pressable onPress={handlePress}>
<Pressable onPress={onPress}>
<Text>Trigger</Text>
</Pressable>
</View>
);

fireEvent.press(screen.getByText('Trigger'));
expect(handlePress).not.toHaveBeenCalled();
expect(onPress).not.toHaveBeenCalled();
});

test('should fire on box-none pointerEvents View', () => {
const handlePress = jest.fn();

test('should fire inside View with pointerEvents="box-none"', () => {
const onPress = jest.fn();
const screen = render(
<View pointerEvents="box-none">
<Pressable onPress={handlePress}>
<Pressable onPress={onPress}>
<Text>Trigger</Text>
</Pressable>
</View>
);

fireEvent.press(screen.getByText('Trigger'));
expect(handlePress).toHaveBeenCalled();
expect(onPress).toHaveBeenCalled();
});

test('should fire on auto pointerEvents View', () => {
const handlePress = jest.fn();

test('should fire inside View with pointerEvents="auto"', () => {
const onPress = jest.fn();
const screen = render(
<View pointerEvents="auto">
<Pressable onPress={handlePress}>
<Pressable onPress={onPress}>
<Text>Trigger</Text>
</Pressable>
</View>
);

fireEvent.press(screen.getByText('Trigger'));
expect(handlePress).toHaveBeenCalled();
expect(onPress).toHaveBeenCalled();
});

test('should not fire on box-only pointerEvents View with nested elements', () => {
const handlePress = jest.fn();

test('should not fire deeply inside View with pointerEvents="box-only"', () => {
const onPress = jest.fn();
const screen = render(
<View pointerEvents="box-only">
<View>
<Pressable onPress={handlePress}>
<Pressable onPress={onPress}>
<Text>Trigger</Text>
</Pressable>
</View>
</View>
);

fireEvent.press(screen.getByText('Trigger'));
expect(handlePress).not.toHaveBeenCalled();
expect(onPress).not.toHaveBeenCalled();
});

test('should fire non-pointer events on box-none pointerEvents View', () => {
const handleTouchStart = jest.fn();

test('should fire non-pointer events inside View with pointerEvents="box-none"', () => {
const onTouchStart = jest.fn();
const screen = render(
<View
pointerEvents="box-none"
onTouchStart={handleTouchStart}
testID="touch-start-view"
>
<Pressable onPress={() => {}}>
<Text>Trigger</Text>
</Pressable>
</View>
<View testID="view" pointerEvents="box-none" onTouchStart={onTouchStart} />
);

fireEvent(screen.getByTestId('touch-start-view'), 'touchStart');
expect(handleTouchStart).toHaveBeenCalled();
fireEvent(screen.getByTestId('view'), 'touchStart');
expect(onTouchStart).toHaveBeenCalled();
});

test('should fire non-touch events on box-none pointerEvents View', () => {
const handleLayout = jest.fn();
test('should fire non-touch events inside View with pointerEvents="box-none"', () => {
const onLayout = jest.fn();
const screen = render(
<View testID="view" pointerEvents="box-none" onLayout={onLayout} />
);

fireEvent(screen.getByTestId('view'), 'layout');
expect(onLayout).toHaveBeenCalled();
});

// This test if pointerEvents="box-only" on composite `Pressable` is blocking
// the 'press' event on host View rendered by pressable.
test('should fire on Pressable with pointerEvents="box-only', () => {
const onPress = jest.fn();
const screen = render(
<View pointerEvents="box-none" onLayout={handleLayout} testID="layout-view">
<Pressable onPress={() => {}}>
<Text>Trigger</Text>
</Pressable>
</View>
<Pressable testID="pressable" pointerEvents="box-only" onPress={onPress} />
);

fireEvent(screen.getByTestId('layout-view'), 'layout');
expect(handleLayout).toHaveBeenCalled();
fireEvent.press(screen.getByTestId('pressable'));
expect(onPress).toHaveBeenCalled();
});

test('should pass event up on disabled TouchableOpacity', () => {
Expand Down
22 changes: 13 additions & 9 deletions src/fireEvent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ReactTestInstance } from 'react-test-renderer';
import { TextInput } from 'react-native';
import act from './act';
import { isHostElement } from './helpers/component-tree';
import { getHostParent, isHostElement } from './helpers/component-tree';
import { filterNodeByType } from './helpers/filterNodeByType';
import { getHostComponentNames } from './helpers/host-component-names';

Expand Down Expand Up @@ -29,28 +29,32 @@ const isTouchResponder = (element?: ReactTestInstance) => {
};

const isPointerEventEnabled = (
element?: ReactTestInstance,
element: ReactTestInstance,
isParent?: boolean
): boolean => {
const parentCondition = isParent
? element?.props.pointerEvents === 'box-only'
: element?.props.pointerEvents === 'box-none';
const pointerEvents = element.props.pointerEvents;
if (pointerEvents === 'none') {
return false;
}

if (element?.props.pointerEvents === 'none' || parentCondition) {
if (isParent ? pointerEvents === 'box-only' : pointerEvents === 'box-none') {
return false;
}

if (!element?.parent) return true;
const parent = getHostParent(element);
if (!parent) {
return true;
}

return isPointerEventEnabled(element.parent, true);
return isPointerEventEnabled(parent, true);
};

const isTouchEvent = (eventName?: string) => {
return eventName === 'press';
};

const isEventEnabled = (
element?: ReactTestInstance,
element: ReactTestInstance,
touchResponder?: ReactTestInstance,
eventName?: string
) => {
Expand Down