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

innerHTML set from render function goes missing when patching? #9135

Closed
dten opened this issue Sep 5, 2023 · 3 comments · Fixed by #11159
Closed

innerHTML set from render function goes missing when patching? #9135

dten opened this issue Sep 5, 2023 · 3 comments · Fixed by #11159
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case

Comments

@dten
Copy link

dten commented Sep 5, 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqVVEtvm0AQ/itTLiSSDYf2hEiapo3Ud6smPZUeCIzDJrBLdwfHkcV/7+wuYJyXWkuWZ+fxzfPzNnjTttG6wyAJUsKmrXPC40wCpJcdkZKwXiqZFLUobo6yoMQajuAF/2TB8XYL9v0awp+SBSQMIYHw3SD2fRp7DI/3VjUto10KWSbs7tGyYFQJKVGzMky7Y9MVFVTU1GncHYecKo1tNOOk8axIfppCi5ZYFk2rNMEWqgX0sNKqgZDbCieLS+/1kUOzXbM5k7hxDiWu8q5mCFttwQ5KoiSTMKaL7RfWUOaUw8Gh9wLQSJ1maXiyHesEVnlt0LkD9PbHxrKQxkO9wSIgUyi5ElfRtVGSp+8QssAmFjXqby0JJU0WcH4PlAV5Xavbj05HuhsTcEyFxc0j+muzsbos+K7RoF5jFkw2yvUVkjefnX/FDcuTsVFlV7P3M8YfaFTd2Rq922knSy575ueq/eCGL+TVhTnbEEozNmULHSdjvXkZdspPtb4r92X00sXxQHmK4yLt+Y63oJ+5BrbZ74OVsw6g1aq1+/avYZfTC4DuWkzgVKkac7nY6TX+6YTGcuhq0HNng+RO+xGkc9I8mSeBJkPvhRFQI9NN+yMcPPiUDMEN3hmmp7u+fQtV+Anv2OZcmLGtvQhJlrC8OFwJieV+CDe/H+IpXj4aIlZwQJUwETvNypr4UR2EpViHs1aZMhY5GfPspmU/v1wE1uGC3dz43l98+cxjsTncG/rDWcTvw2lWgNz9/5Xgp7N4KtEsZJdmvhL3mHPbn9+yydt77PaG/dPmu/QUqoj4/OK4KCWHcfdirSOJFMu2iU/YLdadJNHgslTNCfMgehWXwtBcHaFplpda3TLfGWRGRxvv/gT00h+QJeu/pb0XNk99z/Qg/UTV/i9gFhfh

Steps to reproduce

When you arrive the inner html provided to the Comp's div is visible, when the delete is toggled the innerHTML should end up wrapped in a del element but instead the contents of the div becomes nothing.

A workaround can be demonstrated by setting keys to true in Comp.vue which will assign different keys to the divs which then (i think) forces the elements to not try patch between each other

What is expected?

it to work the same with keys as without since the key is not supposed to be needed

What is actually happening?

element goes missing

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 65.15 GB / 88.39 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

@baiwusanyu-c baiwusanyu-c added the has workaround A workaround has been found to avoid the problem label Sep 6, 2023
@DragonnZhang
Copy link

I think the bug is caused by innerHtml rather than key. In this example, there are no keys, but bug still appears. And main logic about this part is in renderer.

@edison1105 edison1105 added 🐞 bug Something isn't working 🔩 p2-edge-case labels Dec 11, 2023
@edison1105
Copy link
Member

a workaround: add a key.

<Comp v-bind:del="del" :key="del"></Comp>

@dten
Copy link
Author

dten commented Dec 11, 2023

True. The ticket states a such

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working 🔩 p2-edge-case
Projects
None yet
4 participants