A modal (s-modal) disappears on "mouse up" event

Polaris
1
  • Open a modal
  • Click the left mouse button and hold (inside modal)
  • Drag the mouse pointer outside of the modal
  • Release the click
  • Modal closes

I am pretty much sure that this wasn’t a case in shopify/polaris, in web components for some reason it happens

<s-modal
        ref={modalRef}
        id={id}
        heading={t("configureRuleModal.heading")}
        size="base"
        onShow={handleModalShow}
      >
        <s-stack gap="base">{renderRuleContent()}</s-stack>

        <s-button
          slot="secondary-actions"
          commandFor={id}
          command="--hide"
          onClick={handleCancel}
        >
          {t("configureRuleModal.cancel")}
        </s-button>
        <s-button
          slot="primary-action"
          variant="primary"
          onClick={handleSave}
          disabled={showValidation && validationState.hasErrors}
        >
          {t("configureRuleModal.save")}
        </s-button>
      </s-modal>
2

@Anthony_Frehner Hey! This bug still exists, and it’s very annoying one :upside_down_face: Any thoughts, please?

3

Hey @Andriy_Yurchuk - thanks for following up.

This should be fixed in the Polaris CDN 1.1 release candidate, which includes a fix for modals closing when a click or drag crosses the modal edge.

To test it, load the release candidate:

<script src="https://cdn.shopify.com/shopifycloud/polaris-1.1-rc.js"></script>

Then repeat the original steps: press inside the modal, drag outside it, and release. The modal should remain open, while a normal click on the backdrop should still close it.

Polaris CDN 1.1 is the first release candidate under our new semantic versioning model. You can learn more here: The Polaris CDN is adopting semantic versioning - Shopify developer changelog

Hope this helps!