fix(design-system): silence OcDrop attr-inheritance warning storm#2560
Merged
JammingBen merged 2 commits intoMay 20, 2026
Merged
Conversation
OcDrop's root is a fragment (oc-mobile-drop OR Transition+Teleport), so Vue can't auto-inherit caller-supplied attrs. With the default `inheritAttrs: true` Vue logged "Extraneous non-props attributes (class, options) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes" once per OcDrop instance per render. In a typical web session with notifications, app-switcher, account menu and a couple of file-action dropdowns all sitting in the TopBar, the warning fires hundreds of times per page render and makes the dev console (and through it, the whole tab) crawl. Switch to `inheritAttrs: false` and forward the consumer's attrs explicitly via `v-bind="attrs"` on the inner drop div. The existing `:class="attrs?.class"` binding stays so duplicate class handling remains intact (Vue merges `v-bind`-supplied class with the static one). All 16 OcDrop specs stay green.
With `inheritAttrs: false` on OcDrop the consumer-supplied `class` no longer auto-lands on the outer Transition/Teleport fragment root -- it's forwarded explicitly to the inner drop div via `v-bind="attrs"`, which is teleported and so doesn't appear inside the snapshot tree. Real DOM still receives the class as before; only the rendered tree the test serializes lost the attribute. Updated snapshots: - ContextActionMenu: 2 occurrences of the file-action drop wrapper - SpaceHeader: 3 occurrences across the sidebar / image / description test cases
JammingBen
approved these changes
May 20, 2026
openclouders
pushed a commit
that referenced
this pull request
May 20, 2026
fix(design-system): silence OcDrop attr-inheritance warning storm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
OcDrop's template root is a fragment (mobile drawer ORTransition + Teleport), so Vue's default attr auto-inheritance can't pick a single root and falls through to a console warning:Extraneous non-props attributes (class, options) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.OcDropinstances (notifications, app switcher, user menu, and most file-action menus). Each one fires the warning every render. In dev the console floods with hundreds of these per page interaction and the tab gets visibly sluggish.inheritAttrs: false+ explicitv-bind="attrs"on the inner drop div silences the warning without changing the rendered HTML for any existing caller —attrs.classwas already forwarded manually, and Vue merges thev-bind-supplied class with the static one.