fix window.event.target access

Author: snowystinger

packages/@react-aria/datepicker/src/useDatePickerGroup.ts

@@ -68,7 +68,7 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
       return;
     }
     // Try to find the segment prior to the element that was clicked on.
-    let target = window.event?.target as FocusableElement;
+    let target = window.event ? getEventTarget(window.event) as FocusableElement : null;
     let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
     if (target) {
       walker.currentNode = target;

packages/@react-aria/form/src/useFormValidation.ts

@@ -11,10 +11,10 @@
  */
 
 import {FormValidationState} from '@react-stately/form';
+import {getEventTarget, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {RefObject, Validation, ValidationResult} from '@react-types/shared';
 import {setInteractionModality} from '@react-aria/interactions';
 import {useEffect, useRef} from 'react';
-import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
@@ -94,7 +94,7 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
       // This is best-effort. There may be false positives, e.g. setTimeout.
       form.reset = () => {
         // React uses MessageChannel for scheduling, so ignore 'message' events.
-        isIgnoredReset.current = !window.event || (window.event.type === 'message' && window.event.target instanceof MessagePort);
+        isIgnoredReset.current = !window.event || (window.event.type === 'message' && getEventTarget(window.event) instanceof MessagePort);
         reset?.call(form);
         isIgnoredReset.current = false;
       };

packages/dev/eslint-plugin-rsp-rules/rules/safe-event-target.js

@@ -107,14 +107,34 @@ const plugin = {
         // Only match common event parameter names
         const commonEventNames = /^(e|event|evt)$/i;
         let isEventTarget = false;
+        let eventExpression = null;
 
         if (node.object.type === 'Identifier') {
           // Check if the identifier matches common event names (e.target, event.target, evt.target)
           isEventTarget = commonEventNames.test(node.object.name);
+          if (isEventTarget) {
+            eventExpression = node.object;
+          }
+        } else if (node.object.type === 'MemberExpression' || node.object.type === 'ChainExpression') {
+          // Handle *.event.target or *.event?.target patterns (e.g., window.event, getOwnerWindow(foo).event)
+          let objectToCheck = node.object;
+          
+          // Unwrap ChainExpression to get the MemberExpression
+          if (objectToCheck.type === 'ChainExpression') {
+            objectToCheck = objectToCheck.expression;
+          }
+          
+          // Check for *.event pattern (any expression followed by .event)
+          if (objectToCheck.type === 'MemberExpression' &&
+              objectToCheck.property.type === 'Identifier' &&
+              objectToCheck.property.name === 'event') {
+            isEventTarget = true;
+            eventExpression = node.object;
+          }
         }
 
         // Skip if this doesn't look like an event target access
-        if (!isEventTarget) {
+        if (!isEventTarget || !eventExpression) {
           return;
         }
 
@@ -159,8 +179,13 @@ const plugin = {
             const fixes = [];
             const sourceCode = context.sourceCode;
 
-            // Get the event object (e.g., 'event' from 'event.target')
-            const eventText = sourceCode.getText(node.object);
+            // Get the event expression text
+            let eventText = sourceCode.getText(eventExpression);
+            
+            // If it's a ChainExpression (window.event?), unwrap it
+            if (eventExpression.type === 'ChainExpression') {
+              eventText = sourceCode.getText(eventExpression.expression);
+            }
 
             // Replace event.target with getEventTarget(event)
             fixes.push(fixer.replaceText(node, `${getEventTargetLocalName}(${eventText})`));

packages/dev/eslint-plugin-rsp-rules/test/safe-event-target.test-lint.js

@@ -15,7 +15,7 @@ import safeEventTargetRule from '../rules/safe-event-target.js';
 
 const ruleTester = new RuleTester({
   languageOptions: {
-    ecmaVersion: 2015,
+    ecmaVersion: 2020,
     sourceType: 'module'
   }
 });
@@ -167,6 +167,30 @@ getEventTarget(event.nativeEvent)`,
         output: `import {getEventTarget} from '@react-aria/utils';
 getEventTarget(event)`,
         errors: 1
+      },
+      {
+        code: 'window.event.target;',
+        output: `import {getEventTarget} from '@react-aria/utils';
+getEventTarget(window.event);`,
+        errors: 1
+      },
+      {
+        code: 'window.event?.target;',
+        output: `import {getEventTarget} from '@react-aria/utils';
+getEventTarget(window.event);`,
+        errors: 1
+      },
+      {
+        code: 'getOwnerWindow(foo).event.target;',
+        output: `import {getEventTarget} from '@react-aria/utils';
+getEventTarget(getOwnerWindow(foo).event);`,
+        errors: 1
+      },
+      {
+        code: 'getOwnerWindow(foo).event?.target;',
+        output: `import {getEventTarget} from '@react-aria/utils';
+getEventTarget(getOwnerWindow(foo).event);`,
+        errors: 1
       }
     ]
   }