bug with svelte:element and style:property

dm-de commented 11 months ago

Describe the bug

A strange error that was difficult to locate. Probably this is a deep bug in svelte and reactivity. It is a constellation with svelte:element and style:property.

REPL example shows a menu. https://svelte.dev/repl/1419e245a8e84ef4bfcfada6d3b7a416?version=4.2.2

If "Menu2" or "Menu3" is slowly expanded, then everything works correctly. e.g. a click on "Submenu" works.

But if the Menu is quickly collapsed first and then quickly expanded, then something breaks. If you click on Submenu, the padding disappears.

It turns out that "style:padding-left" doesn't work anymore in this case.

I have found several workarounds, all of which can fix the problem - however, I don't see any logic or connection to each other.

1) remove {style} in NavigationItem.svelte and now it works like expected https://svelte.dev/repl/de9b9a81d7db4ee9b48ba25805d3e287?version=4.2.2

2) replace svelte:element in NavigationItem.svelte with div and now it works like expected https://svelte.dev/repl/b747e79d8ff24ad9a31b19ba8a74f39d?version=4.2.2

3) delete NavigationText.svelte and add simple {text} in NavigationItem.svelte and now it works like expected https://svelte.dev/repl/dcf6aa8270cc4285a5b53a14c40783f8?version=4.2.2

Reproduction

https://svelte.dev/repl/1419e245a8e84ef4bfcfada6d3b7a416?version=4.2.2

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 9.46 GB / 15.96 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.69)
    Internet Explorer: 11.0.19041.3570

Severity

annoyance

dm-de commented 11 months ago

BONUS BUG, which goes in the same direction: https://svelte.dev/repl/fec873bb251e4f90bb4b418e8212bda9?version=4.2.2 changes to main REPL: In Navigation.svelte, click-function was modified. "active = item.value" is now processed for any NavigationItem.

With this change, is is possible to see many "active" Items (which should never happen). If you click Submenu first and then quickly collapse/expand Menu.

hothanhloc68 commented 11 months ago

Describe the bug

A strange error that was difficult to locate. Probably this is a deep bug in svelte and reactivity. It is a constellation with svelte:element and style:property.

REPL example shows a menu. https://svelte.dev/repl/1419e245a8e84ef4bfcfada6d3b7a416?version=4.2.2

If "Menu2" or "Menu3" is slowly expanded, then everything works correctly. e.g. a click on "Submenu" works.

But if the Menu is quickly collapsed first and then quickly expanded, then something breaks. If you click on Submenu, the padding disappears.

It turns out that "style:padding-left" doesn't work anymore in this case.

I have found several workarounds, all of which can fix the problem - however, I don't see any logic or connection to each other.

1) remove {style} in NavigationItem.svelte and now it works like expected https://svelte.dev/repl/de9b9a81d7db4ee9b48ba25805d3e287?version=4.2.2

2) replace svelte:element in NavigationItem.svelte with div and now it works like expected https://svelte.dev/repl/b747e79d8ff24ad9a31b19ba8a74f39d?version=4.2.2

3) delete NavigationText.svelte and add simple {text} in NavigationItem.svelte and now it works like expected https://svelte.dev/repl/dcf6aa8270cc4285a5b53a14c40783f8?version=4.2.2

Reproduction

https://svelte.dev/repl/1419e245a8e84ef4bfcfada6d3b7a416?version=4.2.2

Logs

No response

System Info
System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 9.46 GB / 15.96 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.69)
    Internet Explorer: 11.0.19041.3570
Severity

annoyance

dm-de commented 8 months ago

Another example, which is easier to understand - but for style

https://svelte.dev/repl/6b28fb067e0d40dc8dea6d1c77d9ae53?version=4.2.8

click button slow = OK click button many time fast = bug You will see left panel loose size.

This bug does not exist in Svelte 5!

What is wrong? Remove {style} in Panel - now it should work, but you can no more use style.

sveltejs / svelte