[0.81] Implement onClick and onAuxClick (#15920)

* Implement onClick (#15889)

* Implement onClick

* Change files

* Add onAuxClick event

* Update snapshots and fix lint error

* Fix NativeModule templates to work with clang (#15917)

* Fix NativeModule templates to work with clang

* Change files

* update change files

* lint

* lint

* Remove homeUIA tests

* fix

Author: acoates-ms

change/react-native-windows-660aa91b-ff55-4316-a3db-b8910ba99e8c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix NativeModule templates to work with clang",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-b347e777-3318-42c1-991c-4e91d42f6e08.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Implement onClick",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/Pointer/PointerClickEventsExample.windows.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+const React = require('react');
+import {Pressable, StyleSheet, View} from 'react-native';
+import RNTesterText from '../../components/RNTesterText';
+
+function PointerClickEventsExample(): React.Node {
+  const [text, setText] = React.useState(
+    'onClick should cause the box to go red, onAuxClick will cause it go green',
+  );
+  const [bgColor, setBgColor] = React.useState('gray');
+  return (
+    <View>
+      <View
+        accessible
+        testID="pointer-click-target"
+        style={[styles.targetBox, {backgroundColor: bgColor}]}
+        onClick={e => {
+          setBgColor('red');
+          setText(
+            'onClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2),
+          );
+        }}
+        onAuxClick={e => {
+          setBgColor('green');
+          setText(
+            'onAuxClick.nativeEvent: ' + JSON.stringify(e.nativeEvent, null, 2),
+          );
+        }}
+      />
+      <RNTesterText accessible testID="pointer-click-text">
+        {text}
+      </RNTesterText>
+    </View>
+  );
+}
+
+exports.displayName = 'PointerClickExample';
+exports.framework = 'React';
+exports.category = 'Basic';
+exports.title = 'Pointer Clicks';
+exports.documentationURL =
+  'https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event';
+exports.description = 'Tests that onClick and onAuxClick work.';
+
+exports.examples = [
+  {
+    title: 'onClick/onAuxClick test',
+    description:
+      'Click the box with different pointers/buttons to test pointer click events.',
+    render: function (): React.Node {
+      return <PointerClickEventsExample />;
+    },
+  },
+] as Array<RNTesterModuleExample>;
+
+const styles = StyleSheet.create({
+  targetBox: {
+    width: 200,
+    height: 200,
+    margin: 10,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js

@@ -401,6 +401,11 @@ const APIs: Array<RNTesterModuleInfo> = ([
     category: 'Basic',
     module: require('../examples/PointerEvents/PointerEventsExample'),
   },
+  {
+    key: 'PointerClickEventsExample',
+    category: 'Basic',
+    module: require('../examples-win/Pointer/PointerClickEventsExample'),
+  },
   {
     key: 'PointerButtonExample',
     category: 'Basic',

packages/e2e-test-app-fabric/test/HomeUIADump.test.ts

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {goToApiExample} from './RNTesterNavigation';
+import {verifyNoErrorLogs} from './Helpers';
+import {app} from '@react-native-windows/automation';
+
+beforeAll(async () => {
+  // If window is partially offscreen, tests will fail to click on certain elements
+  await app.setWindowPosition(0, 0);
+  await app.setWindowSize(1000, 1250);
+  await goToApiExample('Pointer Clicks');
+});
+
+afterEach(async () => {
+  await verifyNoErrorLogs();
+});
+
+describe('Pointer onClick Test', () => {
+  test('onClick reports correct native event properties on left click', async () => {
+    const component = await app.findElementByTestID('pointer-click-target');
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Left click triggers onPointerDown with button=0
+    await component.click();
+    const stateText = await app.findElementByTestID('pointer-click-text');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return (
+          currentText.includes('"button": 0') && currentText.includes('onClick')
+        );
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onClick with button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toMatchSnapshot();
+  });
+  test('onAuxClick reports correct native event properties on middle click', async () => {
+    const component = await app.findElementByTestID('pointer-click-target');
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Middle click triggers onPointerDown with button=1
+    await component.click({button: 'middle'});
+    const stateText = await app.findElementByTestID('pointer-click-text');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return (
+          currentText.includes('"button": 1') &&
+          currentText.includes('onAuxClick')
+        );
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onAuxClick with middle button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toMatchSnapshot();
+  });
+  test('onAuxClick reports correct native event properties on right click', async () => {
+    const component = await app.findElementByTestID('pointer-click-target');
+    await component.waitForDisplayed({timeout: 5000});
+
+    // Middle click triggers onPointerDown with button=2
+    await component.click({button: 'right'});
+    const stateText = await app.findElementByTestID('pointer-click-text');
+
+    await app.waitUntil(
+      async () => {
+        const currentText = await stateText.getText();
+        return (
+          currentText.includes('"button": 2') &&
+          currentText.includes('onAuxClick')
+        );
+      },
+      {
+        timeout: 5000,
+        timeoutMsg:
+          'State text not updated after onAuxClick with right button property.',
+      },
+    );
+
+    const text = await stateText.getText();
+    expect(text).toMatchSnapshot();
+  });
+});