<s-switch>/<a-checkbox> and contextual save bar bug

Polaris
1

The <s-switch> and <s-checkbox> are automatically switching to ON when the contextual save bar is discarded.

Please see the attached video:
https://cdn.shopify.com/videos/c/o/v/43161dbd2a244d80beeec7d132a9cea8.mov

Is this the expected behavior?

Thank you!

2

Hi, I’m having trouble reproducing the issue in a sandbox. Would you be able to share the code you’re using?

3

I used the AlpineJs x-bind:checked and it seems this is not compatible with Polaris Web Components, so I removed that and it works as expected.

4

I will be curious to see if my fix for your other s-switch reported bug fixes this as well (for your AlpineJS situation)

5

I don’t think it works, I’m still using the hidden_field version that works.

AlpineJS partially works, but the contextual bar doesn’t work x-bind:checked as the field is switched to on automatically when the save_bar is discarded even if the default value is false.

So, i’m using the x-on:change to update the Rails hidden_field and this works:

<s-box x-data="{ custom_field: <%= shop.custom_field %> }">
   <%= f.hidden_field field, "x-model": "custom_field" %>
   <s-switch  <% if shop.custom_field %>checked<% end %> 
   x-on:change="custom_field = !custom_field" 
   label="Custom field">
</s-box>

This version without Alpine doesn’t work as the param is missing for some reason.

<s-switch <% if shop.custom_field %>checked<% end %> 
   name="settings[custom_field]" 
   onchange="this.value = this.checked; this.setAttribute('value', this.checked); this.checked ? this.setAttribute('checked', true) : this.removeAttribute('checked');" 
   label="Custom field" >
</s-switch>

The inner input value is set to on when the switch is disabled and the param is not sent to the server. Please check the following video https://cdn.shopify.com/videos/c/o/v/a6509f0127c44c91b7fddca5d818781a.mov

When checked, the param is sent to the server but with a value is on instead of true.

when-checked
when-checked1054×293 46 KB

When unchecked, the param is not sent at all.

when-unchecked
when-unchecked947×286 42.2 KB

Probably I’m doing something wrong but I can’t figure out what.

6

To clarify - the fix isn’t released yet. When it releases, I’ll be curious to see if it helps this situation.

7

Thanks for the clarification, @Anthony_Frehner .
Looking forward to test the update as soon as it is released.

8

Updates were just pushed to the CDN - can you test it out and see?

1 Like
9

Hey @Anthony_Frehner,

The AlpineJS compatibility x-bind:checked and the contextual save bar is fixed now.

Thank you so much!

1 Like