Skip to content

PointerLeave doesn't fire without another pointer target. #14672

@acoates-ms

Description

@acoates-ms

Problem Description

The below example requires the outer view have some dummy no-op onPointer events in order for the inner view to property get the PointerLeave event.

We should work out why thats required, and fix it.

Steps To Reproduce

import React from 'react';
import {AppRegistry, View} from 'react-native';

const noop = () => {};

const Bootstrap = () => {
  const [hover, setHover] = React.useState(false);
  const setHoverTrue = React.useCallback(() => setHover(true), [setHover]);
  const setHoverFalse = React.useCallback(() => setHover(false), [setHover]);
  return (
    <View
      style={{flexDirection: 'row', gap: 8}}
      onPointerEnter={noop}
      onPointerLeave={noop}>
      <View
        onPointerEnter={setHoverTrue}
        onPointerLeave={setHoverFalse}
        style={{
          margin: 5,
          width: 100,
          height: 100,
          backgroundColor: hover ? 'red' : 'green',
        }}></View>
    </View>
  );
};

AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

Expected Results

No response

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions