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.

Sign up for GitHub

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

Jump to bottom

bug: newly added slots are reordered when the container component's attribute set dynamically #5969

Closed
3 tasks done
yigityuce opened this issue Sep 5, 2024 · 3 comments
Closed
3 tasks done

bug: newly added slots are reordered when the container component's attribute set dynamically #5969

yigityuce opened this issue Sep 5, 2024 · 3 comments
Assignees
@tanner-reits
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil

Comments

@yigityuce
Copy link
Contributor

yigityuce commented Sep 5, 2024 •
edited
Loading

Prerequisites

Stencil Version

4.21.0

Current Behavior

Requirements:

  • scoped components
  • no-shadow
  • experimentalSlotFixes: true
  • experimentalScopedSlotChanges: true

Steps:

  • container element (such as list) with default items in it
  • append() new items to that container element
  • click one of the items in the list
  • newly added items are randomly reordered

Rationale:

  • some flags are missing for the newly added elements
    • for prepend patch: s-sh
    • for append patch: s-sh and s-ol
  • therefore, on any action that triggers the relocation algorithm causes the reordering

prepend:
image

append:
image

Expected Behavior

Current:
image

Expected:
image

System Info

System: node 18.20.2
    Platform: darwin (23.6.0)
   CPU Model: Apple M3 Pro (12 cpus)
    Compiler: /Users/yigit.yuce/Documents/Projects/personal/yigityuce.github/stencil-v4-sc-new-child-relocation/node_modules/@stencil/core/compiler/stencil.js
       Build: 1724698030
     Stencil: 4.21.0 🐷
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

stated above

Code Reproduction URL

https://github.com/yigityuce/stencil-v4-sc-new-child-relocation

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Sep 5, 2024
yigityuce added a commit to yigityuce/stencil that referenced this issue Sep 5, 2024
@yigityuce
fix(dom-extras): add required internal flags to the new nodes to work…
aa2a5af 
… properly with slot relocation algo

stenciljs#5969
@yigityuce yigityuce mentioned this issue Sep 5, 2024
Merged
2 tasks
@tanner-reits tanner-reits self-assigned this Sep 5, 2024
@tanner-reits
Copy link
Contributor

@yigityuce Thanks for the issue! I've confirmed the problem and I'll take a look at your PR first thing tomorrow!

@tanner-reits tanner-reits added Bug: Validated This PR or Issue is verified to be a bug within Stencil and removed triage labels Sep 6, 2024
github-merge-queue bot pushed a commit that referenced this issue Sep 9, 2024
@yigityuce
fix(runtime): scoped slot append/prepend correct order after interact…
2569abd 
…ion (#5970)

* fix(dom-extras): add required internal flags to the new nodes to work properly with slot relocation algo

#5969

* test: add missing tests

* format(): prettier

---------

Co-authored-by: Tanner Reits <[email protected]>
@yigityuce
Copy link
Contributor Author

closing since the PR is merged. thanks all! 🚀

@christian-bromann
Copy link
Member

A fix for this has been released in Stencil v4.22.0 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tanner-reits tanner-reits

Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@christian-bromann @yigityuce @tanner-reits