isDOM doesn't work on elements outside of current window

Open
#644 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start with src/Dom/findDOMNode.ts at the referenced lines and compare its behavior for elements from another window. Then inspect src/Dom/isVisible.ts, where the same cross-window problem is reported. Confirm both utilities handle elements outside the current window without changing behavior for current-window nodes.

Written by the indexing model from the issue text.

Description

This code https://github.com/react-component/util/blob/288022820d2ab899c799ac6336155dedf3e9a766/src/Dom/findDOMNode.ts#L3-L7

Fails when node is not inside the current window. The main use case is using one screen for presentation and another screen for information that the presenter see.

an idea of a fix:

const nodeWindow = node?.ownerDocument?.defaultView;
return node instanceof nodeWindow.HTMLElement || node instanceof nodeWindow.SVGElement;

The issue is that the above code doesn't really work because you need to know if node is an Element first before getting the window, so we'll need a better idea for a fix.

a fix that I feel like is a hack:

return "nodeType" in node && node === Node.ELEMENT_NODE && "tagName" in node;

I don't know if this is good enough, but it works, fixes the bug.

same thing also happens here https://github.com/react-component/util/blob/288022820d2ab899c799ac6336155dedf3e9a766/src/Dom/isVisible.ts#L6

Dominant language
TypeScript
Stars
670
Forks
205
Avg merge
15d 17h
Merged PRs (30d)
6

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-component/util

All issues in react-component/util

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.