Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NodeRef unexpectedly reset when DOM structure changes in view() #2206

Closed
Follpvosten opened this issue Nov 27, 2021 · 1 comment · Fixed by #2279
Closed

NodeRef unexpectedly reset when DOM structure changes in view() #2206

Follpvosten opened this issue Nov 27, 2021 · 1 comment · Fixed by #2279
Labels
A-yew Area: The main yew crate bug

Comments

@Follpvosten
Copy link

Follpvosten commented Nov 27, 2021

Problem
After upgrading to 0.18, one of my components broke in a subtle way: It contains an input that's supposed to autofocus unless the user explicitly unfocuses it. The input element has a NodeRef attached, allowing me to call .focus() on the element. Preceding the input is a variable amount of other elements.

This worked fine in yew 0.17, however in 0.18 (and also on master), it no longer does: If the amount of elements preceding the input changes, the NodeRef gets invalidated.

Based on trying random stuff™, I've arrived at the conclusion that this is what happens:

  1. After the view() method returns the input at a different position, its Node is assigned to the NodeRef.
  2. Next, the old Node gets dropped, but it still has a reference to the NodeRef, so it resets the NodeRef to the empty state.
  3. Leading to: In the rendered() method, you don't have access to the Node anymore.

Steps To Reproduce
Steps to reproduce the behavior: I have written a project demonstrating the issue (based on current master, runnable with trunk serve): https://github.com/Follpvosten/yew-noderef-problem
Check the console output to see how the NodeRef changes after the first event, and then never changes again with subsequent events.
It also includes instructions in comments on how to apply a workaround and how to verify that it doesn't happen when the amount of elements doesn't change. It demonstrates the problem using my usecase: Attempting to force focus on an input.

In words: Basically, create a component with a variable amount of elements before an element that has a NodeRef attached. The NodeRef will break when the amount of elements changes.

Expected behavior
I'd expect the NodeRef to not be reset and be usable in rendered() in this case.

Environment:

  • Yew version: v0.18 and up, including master
  • Rust version: 1.56.1
@Follpvosten
Copy link
Author

Minor update: I've added a function-component branch to my repo now which demonstrates the issue using function components. On the plus side, the experience of moving to the function component API was pretty nice.

@hamza1311 hamza1311 added the A-yew Area: The main yew crate label Nov 27, 2021
WorldSEnder added a commit to WorldSEnder/yew that referenced this issue Dec 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-yew Area: The main yew crate bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants