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

  • 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 Likes