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

class set by class shorthand is deleted when class directive updates and a spread is used on same element #13725

Open
Jibbedi opened this issue Oct 20, 2024 · 3 comments · May be fixed by #13763
Open

class set by class shorthand is deleted when class directive updates and a spread is used on same element #13725

Jibbedi opened this issue Oct 20, 2024 · 3 comments · May be fixed by #13763
Assignees
@paoloricciuti
Labels
bug

Comments

@Jibbedi
Copy link

Jibbedi commented Oct 20, 2024

Describe the bug

First off, major congrats on the release :-) Svelte 5 is awesome!

I have an element that sets a class with the short hand syntax class:dark, sets classes via the regular class directive and calls a function to retrieve some (a11y) props.

<input class:dark={true} class={`${focused ? 'borderColor-accent' : ''}`} {...getAriaProps()} >

Whenever the focus state changes, the dark class is removed. And only borderColor-accent is present.
This only happens when {...getAriaProps()} is present. If this is not present on the element, the dark class stays.

  • It does not seem to matter what is returned from the getAriaProps call.
  • It does not seem to matter what is passed to class:dark.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE2VP3UrFMAx-lRAObIM578c2OfgC3nuE09NlUuzakqaClL67dCIqXiTw_SRfknEzliKOzxmd2glHPIeAPcpHqCC-kxXCHqNPrCszRc0myHJxF7EksHmdIq0wwymKEmo3ZSN1Va61JafFeAevJGc26ol9iG1QrPbYQT5swiSJHeRSYW1uuv-JcZNxIQl4d2TNue1gXn4FCycq4N3NJv6vHvcU0FbFOK6K3-b8NXAwc76e8rf5AZqb55X40VvPd0prctLACE1TrgXyMAx_3ugKLNjj7lezGVpxPBa_lE-FMWuQVgEAAA==

If you remove the spread expression, everything works.

Logs

-

System Info

System:
    OS: macOS 14.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.00 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 6.24.2 - /usr/local/bin/pnpm
    Watchman: 2023.02.27.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 129.0.6668.101
    Chrome Canary: 132.0.6787.0
    Safari: 17.0
  npmPackages:
    svelte: 5.0.3 => 5.0.3

Severity

annoyance
@Conduitry
Copy link
Member

This was previously fixed in #13535, but maybe that didn't account for spread attributes. cc @paoloricciuti

@Conduitry Conduitry added the bug label Oct 20, 2024
@Jibbedi
Copy link
Author

Jibbedi commented Oct 20, 2024

Yeah some major improvements have been made already in that regard. :-)

I reported an issue that the function passed to the class:dark was called too often and that has been fixed also.

I just noticed that the spreaded function is now called on every state change as well.

Is this expected here or could this also be moved to a derived?

@paoloricciuti
Copy link
Member

This was previously fixed in #13535, but maybe that didn't account for spread attributes. cc @paoloricciuti

yup...this is quite tricky, let me see

@paoloricciuti paoloricciuti self-assigned this Oct 21, 2024
@paoloricciuti paoloricciuti linked a pull request Oct 21, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@paoloricciuti paoloricciuti

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: prevent spread attribute from overriding class directive sveltejs/svelte
3 participants
@Conduitry @Jibbedi @paoloricciuti