<s-checkbox> inside <s-modal> Edge bug

Polaris
1

On Microsoft Edge, selecting a checkbox whilst inside an <s-modal>, results in the modal closing, rather than the checkbox being toggled!

1 Like
2

Hey @bkspace :waving_hand: - I wasn’t able to replicate this on my end with the code below:

import { useState } from "react";
import { boundary } from "@shopify/shopify-app-react-router/server";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);
  return null;
};

export default function EdgeBugTest() {
  const [checkboxState, setCheckboxState] = useState(false);

  return (
    <s-page heading="Edge Bug Test: Checkbox in Modal">
      <s-section heading="Reproduction Steps">
        <s-stack gap="base">
          <s-paragraph>
            <s-text type="strong">Bug:</s-text> On Microsoft Edge, clicking a checkbox inside an{" "}
            <s-text type="strong">&lt;s-modal&gt;</s-text> causes the modal to close
            instead of toggling the checkbox.
          </s-paragraph>
          
          <s-paragraph>
            <s-text type="strong">Steps to reproduce:</s-text>
          </s-paragraph>
          
          <s-ordered-list>
            <s-list-item>Open this page in Microsoft Edge</s-list-item>
            <s-list-item>Click the "Open Modal" button below</s-list-item>
            <s-list-item>Click on the checkbox inside the modal</s-list-item>
            <s-list-item>Observe: The modal closes instead of toggling the checkbox</s-list-item>
          </s-ordered-list>

          <s-paragraph>
            <s-text type="strong">Expected behavior:</s-text> The checkbox should toggle
            and the modal should remain open.
          </s-paragraph>

          <s-divider />

          {/* Trigger button following official docs pattern */}
          <s-button commandFor="test-modal" command="--show" variant="primary">
            Open Modal with Checkbox
          </s-button>
        </s-stack>
      </s-section>

      {/* Modal with checkbox - following official docs pattern */}
      <s-modal id="test-modal" heading="Modal with Checkbox">
        <s-stack gap="base">
          <s-paragraph>
            Try clicking the checkbox below. On Edge, this will close the modal.
          </s-paragraph>

          {/* Controlled checkbox following docs validation example pattern */}
          <s-checkbox
            label="Check me (this closes modal on Edge)"
            details="This checkbox should toggle without closing the modal"
            checked={checkboxState}
            onChange={(e) => {
              console.log("Checkbox changed:", e.currentTarget.checked);
              setCheckboxState(e.currentTarget.checked);
            }}
          />

          <s-paragraph>
            <s-text color="subdued">
              Checkbox state: {checkboxState ? "Checked ✓" : "Unchecked ✗"}
            </s-text>
          </s-paragraph>

          {/* Additional checkboxes following docs settings group pattern */}
          <s-divider />
          
          <s-checkbox
            label="Enable notifications"
            details="You'll receive alerts when something changes"
          />
          <s-checkbox
            label="Show advanced options"
            details="Display additional configuration settings"
          />
          <s-checkbox
            label="Remember my preferences"
            checked
          />
        </s-stack>

        {/* Action buttons following official docs pattern */}
        <s-button
          slot="primary-action"
          variant="primary"
          commandFor="test-modal"
          command="--hide"
        >
          Save
        </s-button>
        <s-button
          slot="secondary-actions"
          variant="secondary"
          commandFor="test-modal"
          command="--hide"
        >
          Cancel
        </s-button>
      </s-modal>

      {/* Debug section */}
      <s-section slot="aside" heading="Debug Info">
        <s-stack gap="base">
          <s-paragraph>
            <s-text>Current checkbox state: </s-text>
            <s-badge tone={checkboxState ? "success" : "neutral"}>
              {checkboxState ? "Checked" : "Unchecked"}
            </s-badge>
          </s-paragraph>
          
          <s-paragraph color="subdued">
            Open browser console to see change events when clicking checkboxes.
          </s-paragraph>
        </s-stack>
      </s-section>
    </s-page>
  );
}

export const headers = (headersArgs) => {
  return boundary.headers(headersArgs);
};

I was using version 143.0.3650.66 Edge. If you’re open to sharing a bit of repro code, I can take a look and try to replicate - hope to hear from you soon!

3

Hey @Alan_G :waving_hand:. I described this wrong, and forgot to update things here. I don’t believe the bug is on Edge specifically.

It happens in ‘mobile’ mode.

CleanShot 2026-01-16 at 21.55.23

To test:

CleanShot 2026-01-16 at 21.56.13@2x
CleanShot 2026-01-16 at 21.56.13@2x1444×342 59.2 KB

4

@bkspace can you create a minimal reproduction please? Fork this codepen or something to help us out. https://codepen.io/afrehner/pen/JoKEaow

1 Like
5

@Anthony_Frehner - looks it only happens when the modal is scrolled:

https://codepen.io/bkspace/pen/VYjpeqv

1 Like
6

Thanks, that’s helped me find the root cause. Looking at patching this up soon.

8

This is fixed now, thanks! (Release notes coming soon)

1 Like
9

Fab! Confirm fixed! :green_heart:

1 Like
10

Update notes Updates to the Admin Polaris component library