Modal Dialog Backdrop lost on re-render

[karianpour]

Describe the bug

When using "#each" block and then re-order the items of the array, if we have a "dialog" element open as modal inside a row, and if the items goes to a lower index, the "::backdrop" psudo element get lost. Notice that "::backdrop" psudo element is not get lost if the new index is higher.

I tried it with Svelte 5 and I noticed that it happens the other way round. (the index lower and higher)

Reproduction

I made a Repl to demonstrate the issue:
Issue on Svelte 4 and 3:
https://svelte.dev/repl/0f7b410a6c9c413f82c8bb9e14a66824?version=4.2.19

Issue On Svlelte 5:
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE41V247jNgz9Fa67QBLAjScD9MVjB1gMULRoO_uwC_QhzoNiyWNhZMmQmM0Ehv-90MWXXAbdhyAWycNDHtF0F1VcMBOluy6SpGFRGn1p2yiO8Nzag_nBBLIojow66tJaMlNq3uK2kAC8aZVG6OCkOZKDYNBDpVUDC49LDCrNFk-z2GcmRIhZJ_aw9qE2yIaVShoESpBAPqZd7gpZYIEdcJoW0aaIYqi4NvhCGpbC4i9yhs0iBkGCafFFcyJhs4A-voA-3oM-3oE-DtD9ylWWJWPfhcx8s6UgxuRFRFmjish6MMOaEbr1nBnq8OQc298tL1iWLMH6wvU3ufVkScBb25A1w4Oi5xDR_cJIWcNnJxcxoNUpBi4pe4elVqc1p6t-YpmKsSc6OxXY2fBRl37uytyVdS5tD53l6pN5quQiV4YUblMP8vYf4MZeC-wS21QfGg_dZomT3Ktv8Owf0d9D54EHpSnTv5qWlFy-pvDwdGFH1aawad_BKMEpHAQp3y4jBKvwfoirBusYkF6xHRSiav4nseav9QeZC2wJpb7e9W-aNQNfloxtyiiOGkV5xRmNUtRH1sfj62pv5yfeVxBEvuZFhMZNKoD9sXf3TgqGfmqeroz2rt30F2iP5kTallHIoSLCsOCpjrJErqRzL1dBninW1htatfnWx5YSZMslXUG-HdQsUDM8agk7utvsY6C7h_3eu_rVcAMSXFWqZXJWgzdSToR6hRzkUYiwS8bKaiKpYF9bJpcrywgAQ5ahuoniCvUslGETzPOsS299usg1VRRSfU4HGK9g6aGrqeVbPQGG4E-ByKYeyWcFmFqd_lGUiLEIxzr-9bdLi_IffoUcjohKgpJpKXj5lneTPv24WXjlZyLP84dpibRhiT1bIPzBNMuSdsCkTBgGM-BmDvzGSiXpfWTCqxBqiwDXmF8Avla3AUL9spCuOquMazULd3_gkqZYc5N33tL7FpVhQ4vuMvut1ymrH2H7J5AGCDSWcRiiSmno3FLduU72s82YJfXjgL_R0V5oD1sYuv5ARSfHizoFLWqmGRBJQSrkJQOsCcJZHeHfry-L72CYNTE4kPKNatUCkedGabae9Bu0nzE46k9hwi73-U9xn7gQt9QGuRBz3jvMI4NT3uEv1LVsTi9Q0nmNHwyv5lXyaTCuDt9OpLXfOwPDx3KclPt3Mx8A2IJ7gAuUnTBb4baQA9Wdzbvv_wMGekPENAkAAA==

Logs

No response

System Info

Safari 17.1 / Chrome 123

Severity

annoyance

[adiguba]

Hello,

I don't think this is a Svelte issue.

To change the order of the elements, one of the rows must be removed from the parent before being added to the new location.
So the dialog is removed from the document, which makes him lose his backdrop...

The difference between Svelte 4 and Svelte 5 probably comes from the order in which this is done.

I reproduced the bug in pure JS : https://jsfiddle.net/364mspte/3/

[karianpour]

Thanks @adiguba. Now that I know that this is a kinda expected behaviour in browser, I looked for a workaround. A workaround would be to close and open the modal again. Here is how I could achieve it:

https://svelte.dev/repl/e67c66f9b9b947978b888b3aa12c60b3?version=4.2.19

the only down side is that the UI blinks, which should be fine for this edge case.

[adiguba]

Another solution would be to use svelte-portal.
This allow you to put your template in another place, like directly on the body, so the dialog will not be moved.

Demo here

[karianpour]

Amazing, the svelte 5 demo works, but it does not work for the svelte 4. So for the time being I should stick with the workaround.

[karianpour]

The moveBefore api will solve the issue. Instead of removing and adding the element again, we should move element.

https://developer.chrome.com/blog/movebefore-api

[adiguba]

I tried it quickly, and it's work fine...

But there something I din't understand : the doc say it's a function in the Node prototype, but in fact actually it's in the Element prototype !?
And even if it works, the demo page always says that Node#moveBefore() is NOT enabled...

[brunnerh]

I remember seeing this demo quite a while ago, maybe the spec was not finalized at that point and the demo is now out of date. In any case, this probably could be implemented as a progressive enhancement for browsers implementing it 👍

[adiguba]

I will push a PR, but I don't known how to test that...

[adiguba]

I make a PR.
It work on the lasted Chrome :

https://svelte.dev/playground/hello-world?version=pr-15512#H4sIAAAAAAAAE41V247jNgz9Fa67QBLAjScD9MVjB1gMULRoO_uwC_QhzoNiyWNhZMmQmM0Ehv-90MWXXAbdhyAWycNDHtF0F1VcMBOluy6SpGFRGn1p2yiO8Nzag_nBBLIojow66tJaMlNq3uK2kAC8aZVG6OCkOZKDYNBDpVUDC49LDCrNFk-z2GcmRIhZJ_aw9qE2yIaVShoESpBAPqZd7gpZYIEdcJoW0aaIYqi4NvhCGpbC4i9yhs0iBkGCafFFcyJhs4A-voA-3oM-3oE-DtD9ylWWJWPfhcx8s6UgxuRFRFmjish6MMOaEbr1nBnq8OQc298tL1iWLMH6wvU3ufVkScBb25A1w4Oi5xDR_cJIWcNnJxcxoNUpBi4pe4elVqc1p6t-YpmKsSc6OxXY2fBRl37uytyVdS5tD53l6pN5quQiV4YUblMP8vYf4MZeC-wS21QfGg_dZomT3Ktv8Owf0d9D54EHpSnTv5qWlFy-pvDwdGFH1aawad_BKMEpHAQp3y4jBKvwfoirBusYkF6xHRSiav4nseav9QeZC2wJpb7e9W-aNQNfloxtyiiOGkV5xRmNUtRH1sfj62pv5yfeVxBEvuZFhMZNKoD9sXf3TgqGfmqeroz2rt30F2iP5kTallHIoSLCsOCpjrJErqRzL1dBninW1htatfnWx5YSZMslXUG-HdQsUDM8agk7utvsY6C7h_3eu_rVcAMSXFWqZXJWgzdSToR6hRzkUYiwS8bKaiKpYF9bJpcrywgAQ5ahuoniCvUslGETzPOsS299usg1VRRSfU4HGK9g6aGrqeVbPQGG4E-ByKYeyWcFmFqd_lGUiLEIxzr-9bdLi_IffoUcjohKgpJpKXj5lneTPv24WXjlZyLP84dpibRhiT1bIPzBNMuSdsCkTBgGM-BmDvzGSiXpfWTCqxBqiwDXmF8Avla3AUL9spCuOquMazULd3_gkqZYc5N33tL7FpVhQ4vuMvut1ymrH2H7J5AGCDSWcRiiSmno3FLduU72s82YJfXjgL_R0V5oD1sYuv5ARSfHizoFLWqmGRBJQSrkJQOsCcJZHeHfry-L72CYNTE4kPKNatUCkedGabae9Bu0nzE46k9hwi73-U9xn7gQt9QGuRBz3jvMI4NT3uEv1LVsTi9Q0nmNHwyv5lXyaTCuDt9OpLXfOwPDx3KclPt3Mx8A2IJ7gAuUnTBb4baQA9Wdzbvv_wMGekPENAkAAA==