x-show not working when condition variable is saved persistent

[simonferndriger]

I have a section with the following condition x-show="view !== 'map'" while view is defined as Alpine.$persist(config.defaultView). Now, when the default view changes, it appears correctly when logged out, but the section still shows (i.e. initially seems to use the initial defaultView instead of the stored view.

The funny thing is, when I use the exact same condition for <template x-if="..."> it actually works correct!

[simonferndriger]

PS: I need to change the template notation in this case to x-show in order to avoid content shifts on the initial page load (for most cases).

[ekwoka]

Can you show more code for context?

[simonferndriger]

Does that help or do you need anything else?

[simonferndriger]

Sure, here is the full context: https://rc.swisswebcams.ch/_new/index.html Am Fr., 4. Aug. 2023 um 05:49 Uhr schrieb Eric Kwoka < ***@***.***>:

…

Can you show more code for context? — Reply to this email directly, view it on GitHub <#3693 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAK6SOYBM2YFLJWEAHL7XOTXTRWLVANCNFSM6AAAAAA3DIIG7M> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[simonferndriger]

To be more specific, on view-source: https://rc.swisswebcams.ch/_new/index.html at line 172 <section class="intro roundshot" :class="!visible.intro && 'paused'" :style ="`background-image: url(${bg})`" x-bind="$intro" x-data="{ bg: '', pause: false }" *x-show="(view !== 'map') && content.roundshot**"*> Am Fr., 4. Aug. 2023 um 12:45 Uhr schrieb Simon Ferndriger < ***@***.***>:

…

Sure, here is the full context: https://rc.swisswebcams.ch/_new/index.html Am Fr., 4. Aug. 2023 um 05:49 Uhr schrieb Eric Kwoka < ***@***.***>: > Can you show more code for context? > > — > Reply to this email directly, view it on GitHub > <#3693 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAK6SOYBM2YFLJWEAHL7XOTXTRWLVANCNFSM6AAAAAA3DIIG7M> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[ekwoka]

That is really really strange 🤔

Show does have some issues evaluating initial states but I've not seen this before...

[simonferndriger]

OK, let me know when if I can test some things for you to help out

[simonferndriger]

The only workaround so far to make it work with <template x-if> is this not-really-a-solution:

app.view = ''; setTimeout(() => { app.view = 'map' }, 400);

[simonferndriger]

Go lower than 400 and it doesn't work constantly

[simonferndriger]

@ekwoka
Is there a way to trigger the re-evaluation of the x-if condition manually as a workaround?

[jannisborgers]

Glad I found this post.

When building cookie banners, I usually store a cookies object in a page component and persist it like so:

const page = function() {
  return {
    cookies: this.$persist({
      consent: false,
      closed: false,
      types: [
        {
          type: "necessary",
          selected: true, 
          default: true,
        },
        {
          type: "youtube",
          selected: false, 
          default: false,
        },
        // other cookie types here
      ]
    }).using(cookieStorage),
  }
};

export default page;

That component is placed on the body of each document.

I then have a cookieBanner component that lets you modify the cookies object by selecting options and various actions like declining all, accepting all, etc. This is a shortened version to illustrate the point:

const cookieBanner = () => {
  return {
    showBanner: true,
    show() {
      this.showBanner = true;
    },
    hide() {
      this.showBanner = false;
      this.cookies.closed = true;
    },
    save() {
      this.cookies.consent = true;
      this.hide();
    },
    init() {
      if (this.cookies.closed) {
        this.hide();
      } else {
        this.show();
      }
    }
  }
};

export default cookieBanner;

So when using the save button in the modal, it should change the consent and closed properties in the persisted storage. And using x-show="showBanner" on the modal, it should instantly hide the modal after using the save button, and be hidden on initialization afterwards.

It doesn’t hide.

I tried debugging it with x-transition to see what is happening. The banner fades out after using the save button, but pops back into view on transitionend.

• style="display: none;" is not added anywhere based on the showBanner property. (I also have a button whose conditional is the opposite: show the button when banner is closed. It is only hidden on page load, not when changing the properties).
• _x_cookies in cookie storage shows closed: true after clicking save
• AlpineJS dev tools show showBanner: false after clicking save
• The init() condition works, so when I refresh the page, the banner is hidden correctly and after the refresh, the logic works consistently.
• The problem occurs with any storage type. cookieStorage or localStorage both save the right property values and the Alpine component reacts as expected as well, but x-show doesn’t work.

When I use class="showBanner ? '' : 'hidden'" instead of x-show, the modal hides as expected.

[ekwoka]

Can you make a codepen?

[jannisborgers]

Hi @ekwoka – of course. Hope you don’t mind the Tailwind classes, I tried to slim it down a bit:

With code: https://codepen.io/jannisborgers/pen/vYbwmoa
(Or fullscreen here)

Steps to reproduce:

• Click „Accept all“, X to close, or „Configure“ and then „Save“ -> modal does not close
• Reload page
• Try steps again
• Empty cookie storage
• Try steps again

Notice the short fade-out via x-transition that is undone once the transition finishes.

Wrapping the whole „Modal/Overlay/Card“ part of the code in a <template x-if="showBanner"> solves the problem.

[ekwoka]

Yeah but that really shouldn't be necessary. 🤔 I'll take a look