fix(TransitionGroup): avoid set transition hooks for comment nodes and text nodes #9421

edison1105 · 2023-10-18T08:10:00Z

The root cause of the above issues is the same.
The elements inside TransitionGroup are comment nodes or text nodes. We can't apply the Transition to them.

github-actions · 2023-10-18T08:11:46Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.6 kB (+44 B)	34.4 kB (+9 B)	31.1 kB (+21 B)
vue.global.prod.js	148 kB (+44 B)	53.7 kB (+12 B)	48 kB (+44 B)

Usages

Name	Size	Gzip	Brotli
createApp	50.7 kB	19.8 kB	18.1 kB
createSSRApp	54 kB	21.2 kB	19.3 kB
defineCustomElement	53 kB	20.6 kB	18.7 kB
overall	64.4 kB	24.9 kB	22.5 kB

netlify · 2023-10-24T13:51:10Z

❌ Deploy Preview for vue-next-template-explorer failed.

Name	Link
🔨 Latest commit	`4bc0ed9`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-next-template-explorer/deploys/6537c88773deed00075664f8

netlify · 2023-10-24T13:52:23Z

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	`4bc0ed9`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/6537c8874b3a4600081c9e09

netlify · 2023-10-24T14:11:01Z

❌ Deploy Preview for vue-next-template-explorer failed.

Name	Link
🔨 Latest commit	`9acce54`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-next-template-explorer/deploys/6537cb515e391a00089b4f61

netlify · 2023-10-24T14:11:01Z

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	`9acce54`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/6537cb519a69bf000811ab29

packages/runtime-core/src/hydration.ts

haoqunjiang

After further investigation, I think isComment isn't enough here.

The root problem here is that getBoundingClientRect is a method on Element objects, while el could be any node type (child.el as Element doesn't hold true).
It could be either Comment (as in the linked issues) or Text (as in #5153 and #4622) or maybe something else (haven't seen any reports yet)

edison1105 · 2023-10-25T09:34:00Z

@sodatea
Ok, I got your point now. Perhaps we can use child.el instanceof Element as a filtering condition because only Element(including those created using createElement and createElementNS) have the getBoundingClientRect method. This way, elements created using createComment and createTextNode can be filtered out. Similarly, elements created using other createXXX methods will also be filtered out.

~~I'll take a closer at #5153 and #4622 later.~~
The root cause of both of them is the transition setup for the text node.
added test cases for #5153 and #4622

alexeyvokin · 2024-01-17T08:42:26Z

Someone answer the question. Does the team plan to merge this request?

haoqunjiang · 2024-01-17T14:44:41Z

https://github.com/vuejs/core/blob/main/.github/maintenance.md#pr-merge-rules-for-team-members

Fixes / refactors: can merge with two or more approvals from team members.

We need one more approval from team members.

alexeyvokin · 2024-02-19T02:17:21Z

@sxzz check, pls🙏

yyx990803 · 2024-04-14T09:15:22Z

/ecosystem-ci run

vue-bot · 2024-04-14T09:22:16Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

## [3.4.27](vuejs/core@v3.4.26...v3.4.27) (2024-05-06) ### Bug Fixes * **compat:** include legacy scoped slots ([#10868](vuejs/core#10868)) ([8366126](vuejs/core@8366126)), closes [#8869](vuejs/core#8869) * **compiler-core:** add support for arrow aysnc function with unbracketed ([#5789](vuejs/core#5789)) ([ca7d421](vuejs/core@ca7d421)), closes [#5788](vuejs/core#5788) * **compiler-dom:** restrict createStaticVNode usage with option elements ([#10846](vuejs/core#10846)) ([0e3d617](vuejs/core@0e3d617)), closes [#6568](vuejs/core#6568) [#7434](vuejs/core#7434) * **compiler-sfc:** handle keyof operator ([#10874](vuejs/core#10874)) ([10d34a5](vuejs/core@10d34a5)), closes [#10871](vuejs/core#10871) * **hydration:** handle edge case of style mismatch without style attribute ([f2c1412](vuejs/core@f2c1412)), closes [#10786](vuejs/core#10786) ## [3.4.26](vuejs/core@v3.4.25...v3.4.26) (2024-04-29) ### Bug Fixes * **compiler-core:** fix bail constant for globals ([fefce06](vuejs/core@fefce06)) * **compiler-core:** remove unnecessary constant bail check ([09b4df8](vuejs/core@09b4df8)), closes [#10807](vuejs/core#10807) * **runtime-core:** attrs should be readonly in functional components ([#10767](vuejs/core#10767)) ([e8fd644](vuejs/core@e8fd644)) * **runtime-core:** ensure slot compiler marker writable ([#10825](vuejs/core#10825)) ([9c2de62](vuejs/core@9c2de62)), closes [#10818](vuejs/core#10818) * **runtime-core:** properly handle inherit transition during clone VNode ([#10809](vuejs/core#10809)) ([638a79f](vuejs/core@638a79f)), closes [#3716](vuejs/core#3716) [#10497](vuejs/core#10497) [#4091](vuejs/core#4091) * **Transition:** re-fix [#10620](vuejs/core#10620) ([#10832](vuejs/core#10832)) ([accf839](vuejs/core@accf839)), closes [#10632](vuejs/core#10632) [#10827](vuejs/core#10827) ## [3.4.25](vuejs/core@v3.4.24...v3.4.25) (2024-04-24) ### Bug Fixes * **defineModel:** align prod mode runtime type generation with defineProps ([4253a57](vuejs/core@4253a57)), closes [#10769](vuejs/core#10769) * **runtime-core:** properly get keepAlive child ([#10772](vuejs/core#10772)) ([3724693](vuejs/core@3724693)), closes [#10771](vuejs/core#10771) * **runtime-core:** use normal object as internal prototype for attrs and slots ([064e82f](vuejs/core@064e82f)), closes [/github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add#r141304923](https://github.com//github.com/vuejs/core/commit/6df53d85a207986128159d88565e6e7045db2add/issues/r141304923) ## [3.4.24](vuejs/core@v3.4.23...v3.4.24) (2024-04-22) ### Bug Fixes * **compiler-core:** handle template ref bound via v-bind object on v-for ([#10706](vuejs/core#10706)) ([da7adef](vuejs/core@da7adef)), closes [#10696](vuejs/core#10696) * **compiler-core:** properly parse await expressions in edge cases ([b92c25f](vuejs/core@b92c25f)), closes [#10754](vuejs/core#10754) * **compiler-sfc:** handle readonly operator and ReadonlyArray/Map/Set types ([5cef52a](vuejs/core@5cef52a)), closes [#10726](vuejs/core#10726) * **compiler-ssr:** fix hydration mismatch for conditional slot in transition ([f12c81e](vuejs/core@f12c81e)), closes [#10743](vuejs/core#10743) * **compiler-ssr:** fix v-html SSR for nullish values ([1ff4076](vuejs/core@1ff4076)), closes [#10725](vuejs/core#10725) * **deps:** update compiler ([#10760](vuejs/core#10760)) ([15df5c1](vuejs/core@15df5c1)) * **runtime-core:** fix edge case of KeepAlive inside Transition with slot children ([#10719](vuejs/core#10719)) ([e51ca61](vuejs/core@e51ca61)), closes [#10708](vuejs/core#10708) * **runtime-core:** further fix slots _ctx check ([cde7f05](vuejs/core@cde7f05)), closes [#10724](vuejs/core#10724) * **runtime-core:** props should be readonly via direct template access ([b93f264](vuejs/core@b93f264)), closes [#8216](vuejs/core#8216) [#10736](vuejs/core#10736) * **transition:** transition is breaking/flickering when enter is canceled ([#10688](vuejs/core#10688)) ([65109a7](vuejs/core@65109a7)) ## [3.4.23](vuejs/core@v3.4.22...v3.4.23) (2024-04-16) ### Bug Fixes * **runtime-core:** fix regression for $attrs tracking in slots ([6930e60](vuejs/core@6930e60)), closes [#10710](vuejs/core#10710) * **runtime-core:** use same internal object mechanism for slots ([6df53d8](vuejs/core@6df53d8)), closes [#10709](vuejs/core#10709) ## [3.4.22](vuejs/core@v3.4.21...v3.4.22) (2024-04-15) ### Bug Fixes * **compat:** fix $options mutation + adjust private API initialization ([d58d133](vuejs/core@d58d133)), closes [#10626](vuejs/core#10626) [#10636](vuejs/core#10636) * **compile-sfc:** analyze v-bind shorthand usage in template ([#10518](vuejs/core#10518)) ([e5919d4](vuejs/core@e5919d4)), closes [#10515](vuejs/core#10515) * **compiler-core:** fix loc.source for end tags with whitespace before > ([16174da](vuejs/core@16174da)), closes [#10694](vuejs/core#10694) [#10695](vuejs/core#10695) * **compiler-core:** fix v-bind shorthand for component :is ([04af950](vuejs/core@04af950)), closes [#10469](vuejs/core#10469) [#10471](vuejs/core#10471) * **compiler-sfc:** :is() and :where() in compound selectors ([#10522](vuejs/core#10522)) ([660cadc](vuejs/core@660cadc)), closes [#10511](vuejs/core#10511) * **compiler-sfc:** also search for `.tsx` when type import's extension is omitted ([#10637](vuejs/core#10637)) ([34106bc](vuejs/core@34106bc)), closes [#10635](vuejs/core#10635) * **compiler-sfc:** fix defineModel coercion for boolean + string union types ([#9603](vuejs/core#9603)) ([0cef65c](vuejs/core@0cef65c)), closes [#9587](vuejs/core#9587) [#10676](vuejs/core#10676) * **compiler-sfc:** fix universal selector scope ([#10551](vuejs/core#10551)) ([54a6afa](vuejs/core@54a6afa)), closes [#10548](vuejs/core#10548) * **compiler-sfc:** use options module name if options provide runtimeModuleName options ([#10457](vuejs/core#10457)) ([e76d743](vuejs/core@e76d743)), closes [#10454](vuejs/core#10454) * **custom-element:** avoid setting attr to null if it is removed ([#9012](vuejs/core#9012)) ([b49306a](vuejs/core@b49306a)), closes [#9006](vuejs/core#9006) [#10324](vuejs/core#10324) * **hydration:** properly handle optimized mode during hydrate node ([#10638](vuejs/core#10638)) ([2ec06fd](vuejs/core@2ec06fd)), closes [#10607](vuejs/core#10607) * **reactivity:** computed should not be detected as true by isProxy ([#10401](vuejs/core#10401)) ([9da34d7](vuejs/core@9da34d7)) * **reactivity:** fix hasOwnProperty key coercion edge cases ([969c5fb](vuejs/core@969c5fb)) * **reactivity:** fix tracking when hasOwnProperty is called with non-string value ([c3c5dc9](vuejs/core@c3c5dc9)), closes [#10455](vuejs/core#10455) [#10464](vuejs/core#10464) * **runtime-core:** fix errorHandler causes an infinite loop during execution ([#9575](vuejs/core#9575)) ([ab59bed](vuejs/core@ab59bed)) * **runtime-core:** handle invalid values in callWithAsyncErrorHandling ([53d15d3](vuejs/core@53d15d3)) * **runtime-core:** show hydration mismatch details for non-rectified mismatches too when __PROD_HYDRATION_MISMATCH_DETAILS__ is set ([#10599](vuejs/core#10599)) ([0dea7f9](vuejs/core@0dea7f9)) * **runtime-dom:** `v-model` string/number coercion for multiselect options ([#10576](vuejs/core#10576)) ([db374e5](vuejs/core@db374e5)) * **runtime-dom:** fix css v-bind for suspensed components ([#8523](vuejs/core#8523)) ([67722ba](vuejs/core@67722ba)), closes [#8520](vuejs/core#8520) * **runtime-dom:** force update v-model number with leading 0 ([#10506](vuejs/core#10506)) ([15ffe8f](vuejs/core@15ffe8f)), closes [#10503](vuejs/core#10503) [#10615](vuejs/core#10615) * **runtime-dom:** sanitize wrongly passed string value as event handler ([#8953](vuejs/core#8953)) ([7ccd453](vuejs/core@7ccd453)), closes [#8818](vuejs/core#8818) * **ssr:** don't render v-if comments in TransitionGroup ([#6732](vuejs/core#6732)) ([5a96267](vuejs/core@5a96267)), closes [#6715](vuejs/core#6715) * **Transition:** ensure the KeepAlive children unmount w/ out-in mode ([#10632](vuejs/core#10632)) ([fc99e4d](vuejs/core@fc99e4d)), closes [#10620](vuejs/core#10620) * **TransitionGroup:** avoid set transition hooks for comment nodes and text nodes ([#9421](vuejs/core#9421)) ([140a768](vuejs/core@140a768)), closes [#4621](vuejs/core#4621) [#4622](vuejs/core#4622) [#5153](vuejs/core#5153) [#5168](vuejs/core#5168) [#7898](vuejs/core#7898) [#9067](vuejs/core#9067) * **types:** avoid merging object union types when using withDefaults ([#10596](vuejs/core#10596)) ([37ba93c](vuejs/core@37ba93c)), closes [#10594](vuejs/core#10594) ### Performance Improvements * add `__NO_SIDE_EFFECTS__` comments ([#9053](vuejs/core#9053)) ([d46df6b](vuejs/core@d46df6b)) * optimize component props/slots internal object checks ([6af733d](vuejs/core@6af733d)) * **ssr:** avoid calling markRaw on component instance proxy ([4bc9f39](vuejs/core@4bc9f39)) * **ssr:** optimize setup context creation for ssr in v8 ([ca84316](vuejs/core@ca84316)) ## [3.4.21](vuejs/core@v3.4.20...v3.4.21) (2024-02-28) ### Bug Fixes * **runtime-dom:** avoid unset option's value ([#10416](vuejs/core#10416)) ([b3f8b5a](vuejs/core@b3f8b5a)), closes [#10412](vuejs/core#10412) [#10396](vuejs/core#10396) * **suspense:** ensure nested suspense patching if in fallback state ([#10417](vuejs/core#10417)) ([7c97778](vuejs/core@7c97778)), closes [#10415](vuejs/core#10415) * **warning:** stringify args in warn handler ([#10414](vuejs/core#10414)) ([bc37258](vuejs/core@bc37258)), closes [#10409](vuejs/core#10409) ## [3.4.20](vuejs/core@v3.4.19...v3.4.20) (2024-02-26) ### Bug Fixes * **parser:** should not treat uppercase components as special tags ([e0e0253](vuejs/core@e0e0253)), closes [#10395](vuejs/core#10395) * **runtime-dom:** avoid always resetting nullish option value ([ff130c4](vuejs/core@ff130c4)), closes [#10396](vuejs/core#10396) * **runtime-dom:** fix nested v-show priority regression ([364f890](vuejs/core@364f890)), closes [#10338](vuejs/core#10338) * **runtime-dom:** v-bind style should clear previous css string value ([#10373](vuejs/core#10373)) ([e2d3235](vuejs/core@e2d3235)), closes [#10352](vuejs/core#10352) * **suspense:** handle suspense switching with nested suspense ([#10184](vuejs/core#10184)) ([0f3da05](vuejs/core@0f3da05)), closes [#10098](vuejs/core#10098) * **types:** better typing for direct setup signature of defineComponent ([#10357](vuejs/core#10357)) ([eadce5b](vuejs/core@eadce5b)), closes [#8604](vuejs/core#8604) [#8855](vuejs/core#8855) ## [3.4.19](vuejs/core@v3.4.18...v3.4.19) (2024-02-13) ### Bug Fixes * **deps:** pin lru-cache to avoid hashing error ([b8be990](vuejs/core@b8be990)), closes [#10300](vuejs/core#10300) * **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](vuejs/core@995d2fd)), closes [#10317](vuejs/core#10317) [#10325](vuejs/core#10325) * **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](vuejs/core#10311)) ([e509639](vuejs/core@e509639)) ### Features > Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs. * **dx:** warn users when computed is self-triggering ([#10299](vuejs/core#10299)) ([f7ba97f](vuejs/core@f7ba97f)) ### Performance Improvements * **runtime:** improve `getType()` GC and speed ([#10327](vuejs/core#10327)) ([603a1e1](vuejs/core@603a1e1))

…d text nodes (vuejs#9421) close vuejs#4621 close vuejs#4622 close vuejs#5153 close vuejs#5168 close vuejs#7898 close vuejs#9067

fix(TransitionGroup): avoid set transition hooks for comment node

1afa3ad

Merge branch 'main' into fix/5168

1808e09

edison1105 mentioned this pull request Oct 24, 2023

fix(runtime-dom): TransitionGroup children el may be null #9068

Closed

edison1105 added 4 commits October 24, 2023 21:29

test: add test case

074afe6

test: add test case

3944b75

Merge branch 'main' into fix/5168

4bc0ed9

chore: improve code

9acce54

chore: improve code

e31e02d

haoqunjiang added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Oct 24, 2023

haoqunjiang reviewed Oct 24, 2023

View reviewed changes

packages/runtime-core/src/hydration.ts Outdated Show resolved Hide resolved

chore: improve code

9f34512

haoqunjiang requested changes Oct 25, 2023

View reviewed changes

chore: improve code

4ec36dc

haoqunjiang approved these changes Oct 25, 2023

View reviewed changes

haoqunjiang added the ready for review This PR requires more reviews label Oct 25, 2023

edison1105 added 2 commits October 25, 2023 20:54

test: add more test case

ed1e8a5

chore: add comments

3e28ec3

edison1105 mentioned this pull request Oct 25, 2023

template compilation wrong identification of whitespaces let transition-group fail with exception "Cannot read properties of null (reading 'getBoundingClientRect')" #5153

Closed

edison1105 changed the title ~~fix(TransitionGroup): avoid set transition hooks for comment node~~ fix(TransitionGroup): avoid set transition hooks for comment nodes and text nodes Oct 25, 2023

haoqunjiang approved these changes Jan 17, 2024

View reviewed changes

haoqunjiang requested a review from sxzz January 17, 2024 14:50

yyx990803 and others added 2 commits April 14, 2024 17:12

Merge branch 'main' into fix/5168

dfd53b6

[autofix.ci] apply automated fixes

a2c3bac

refactor: avoid looping over prevChildren twice

1f1e9ec

yyx990803 merged commit 140a768 into vuejs:main Apr 14, 2024
11 checks passed

This was referenced Apr 17, 2024

fix(transition): get root el of DEV_FRAGMENT_ROOT #6761

Closed

fix: fix transition-group processing of whitespace nodes #4647

Closed

This was referenced Sep 3, 2024

TransitionGroup getBoundingClientRect is not a function #6745

Closed

HTML comment in custom component wrapped with <transition-group> breaks transition #4830

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(TransitionGroup): avoid set transition hooks for comment nodes and text nodes #9421

fix(TransitionGroup): avoid set transition hooks for comment nodes and text nodes #9421

edison1105 commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Oct 18, 2023 •

edited

Loading

netlify bot commented Oct 24, 2023

netlify bot commented Oct 24, 2023

netlify bot commented Oct 24, 2023

netlify bot commented Oct 24, 2023

haoqunjiang left a comment

edison1105 commented Oct 25, 2023 •

edited

Loading

alexeyvokin commented Jan 17, 2024

haoqunjiang commented Jan 17, 2024

alexeyvokin commented Feb 19, 2024

yyx990803 commented Apr 14, 2024

vue-bot commented Apr 14, 2024

fix(TransitionGroup): avoid set transition hooks for comment nodes and text nodes #9421

fix(TransitionGroup): avoid set transition hooks for comment nodes and text nodes #9421

Conversation

edison1105 commented Oct 18, 2023 • edited Loading

github-actions bot commented Oct 18, 2023 • edited Loading

Size Report

Bundles

Usages

netlify bot commented Oct 24, 2023

❌ Deploy Preview for vue-next-template-explorer failed.

netlify bot commented Oct 24, 2023

❌ Deploy Preview for vue-sfc-playground failed.

netlify bot commented Oct 24, 2023

❌ Deploy Preview for vue-next-template-explorer failed.

netlify bot commented Oct 24, 2023

❌ Deploy Preview for vue-sfc-playground failed.

haoqunjiang left a comment

Choose a reason for hiding this comment

edison1105 commented Oct 25, 2023 • edited Loading

alexeyvokin commented Jan 17, 2024

haoqunjiang commented Jan 17, 2024

alexeyvokin commented Feb 19, 2024

yyx990803 commented Apr 14, 2024

vue-bot commented Apr 14, 2024

edison1105 commented Oct 18, 2023 •

edited

Loading

github-actions bot commented Oct 18, 2023 •

edited

Loading

edison1105 commented Oct 25, 2023 •

edited

Loading