adobe / adobe/react-spectrum

preventFocus() TypeError when the window is the target focus or blur

Open
#10,591 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

`preventFocus()` throws a `TypeError` when the window itself is the target of a `focus` or `blur` event while its listeners are attached. Regression in `react-aria@3.52.0`; `3.51.0` is unaffected and `3.52.1` still throws. So far as I can tell this is log spam rather than user impacting.

### 🤔 Expected Behavior?

Window-targeted `focus` and `blur` events are ignored by this code, as they were before 3.52.0.

### 😯 Current Behavior

An uncaught `TypeError`, which we see via Sentry:

```txt
Chrome: TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
WebKit: TypeError: Argument 1 ('other') to Node.contains must be an instance of Node
```

#9632 (`c1a6152e`) reworked `preventFocus()` for shadow DOM. It attaches capturing `focus`/`blur` listeners to `getOwnerWindow(target)`, and the handlers moved from reference equality to `nodeContains()` which doesn't cope with window targets.

### 💁 Possible Solution

Guard `nodeContains` calls with an `isNode` check.

### 🔦 Context

As noted above we don't see serious impact from this, just Sentry logs, but it seems like a logical error worth fixing.

### 🖥️ Steps to Reproduce

I see this in Sentry but I've found it hard to get a real-world manual reproduction, presumably it's a RAF timing quirk. This proposed test triggers the error scenarios:

https://github.com/adobe/react-spectrum/compare/main...microbit-matt-hillsdon:react-spectrum:preventfocus-window-target-repro

### Version

3.52.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Mac, Windows

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating preventFocus() and nodeContains() in the react-spectrum source, then review the shadow DOM changes from #9632 and the linked reproduction. Verify that window-targeted focus and blur events no longer throw while existing node-target behavior remains unchanged, using the proposed reproduction as the regression check.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.