Skip to content

Call inherited host node methods on the host node in strict refs - #515

Open
adityasingh2400 wants to merge 1 commit into
react:mainfrom
adityasingh2400:fix-506-strict-ref-receiver
Open

Call inherited host node methods on the host node in strict refs#515
adityasingh2400 wants to merge 1 commit into
react:mainfrom
adityasingh2400:fix-506-strict-ref-receiver

Conversation

@adityasingh2400

Copy link
Copy Markdown

Fixes #506.

getOrCreateStrictRef builds the strict ref with Object.create(node), so a method that lives on the host node prototype chain is still reachable from the wrapper but gets invoked with the wrapper as its receiver. React Native host node methods read internals off this, and the wrapper does not carry those internals, so ref.current.focus() and ref.current.blur() silently do nothing on native while getNativeRef().focus() still works. Reads keep working because own properties of the node resolve through the prototype chain, which is why only the imperative methods broke.

This walks the node's prototype chain once per node and re-exposes each inherited method as an own property that calls through to the node, so the receiver stays correct. Own methods of the node are left alone since React Native assigns those as closures over the node, and accessors are left on the prototype chain since they read plain instance fields the wrapper already inherits. The binding runs before the strict-dom overrides are defined so the viewport-scaled getBoundingClientRect still wins.

Added a regression test in html-refs-test.native.js that mounts an html.input over a host node mock whose focus and blur live on the prototype, then asserts the receiver is the host node. It fails on main and passes with this change. Ran the full package suite (19 suites, 897 tests), flow check, eslint, and prettier, all clean.

The strict ref wrapper uses Object.create(node), so methods that live on
the host node prototype chain are reached through the wrapper but invoked
with the wrapper as the receiver. RN host node methods read internals off
this, which the wrapper does not carry, so ref.focus() and ref.blur() stop
working on native.

Re-expose inherited methods as own properties that call through to the
host node. Own methods of the node are untouched because RN assigns those
as closures over the node.
@meta-cla meta-cla Bot added the cla signed label Aug 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

html.input ref .focus() does not work on native

1 participant