Background jumps when using datepicker/select in non-Flux modal

[DonCamillo11]

Flux version

v2.0.3

Livewire version

v3.6.0

Tailwind version

v4.0.9

Browser and Operating System

Safari on macOS

What is the problem?

Sorry, I have to come back to my closed topic #1219.
I found out, that the padding is calculated by window.innerWidth - document.documentElement.clientWidth in the flux.js.
But the problem is, if I open a new modal as a separate component like Wire Elements does, the padding is recalculated, but since the scroll bar is already hidden, the result is 0, which means that the padding-right in the document.documentElement is change from 15px (in my case) to 0 which results in the unwanted layout shift. So no new value should be set if there is already a padding set.
I wrote a quick fix myself, but I'm not sure if it covers all cases and I don't want to overwrite my files. So please rethink the issue. Thanks ✌️

function preventScrollWhenPopoverIsOpen(root, dialogable) {
  let { lock, unlock } = lockScroll();
    if(document.documentElement.style.paddingRight == "") {
      dialogable.onChange(() => {
        dialogable.getState() ? lock() : unlock();
      });
    }
  }

Code snippets

#1219

How do you expect it to work?

As I mentioned above. The padding should only be set once. If its already set there is no need to reset it.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@DonCamillo11 Caleb didn't want to spend time on this issue as he believes you should use the Flux's modal, but if you can provide a small example repo that demonstrates the issue I'd be happy to have a quick look for you. I'm going to close this issue, but if you can keep commenting on this issue instead of opening a new one, we can see if we can get it sorted. If I can identify that it's a bug with Flux, I will then reopen this issue. 🙂

[DonCamillo11]

@joshhanley Yeah, I understood. But this wasn’t a satisfying answer 🙂 Since I have quite a complex app with tens of modals switching to flux modals isn’t an option for me. I think it should work in all environments. Aside from that, I like the way Wire Elements Pro handles modals much more than the Flux way 🙂
So, how do you want me to provide a sample repo since wire elements pro is a paid version and I cannot publish it to a public repo? A code snippet is already posted on the other ticket.

[joshhanley]

@DonCamillo11 yeah fair enough! Hmm not sure. But it's hard for us to try and fix something if there isn't a way for us to replicate the issue. Sadly I don't have access to Wire Elements Pro.

[DonCamillo11]

@joshhanley I was able to reproduce the issue with a modified version of the free wire elements modal. Please take a look here https://github.com/DonCamillo11/flux-modal-issue

Opening the "Wire Elements Modal" button will show the issue.

[joshhanley]

@DonCamillo11 awesome thanks! I will try and pull it down today to see if I can work out what is happening.