Modal React component not working as expected.

Wakil_eFoli
Shopify Partner
37 1 5

When using the shopify app bridge Modal component the close("x") button at the top doesn't work.

Here's the link to the doc. 

 

 

 

import {Modal, TitleBar, useAppBridge} from '@shopify/app-bridge-react';

export function MyModal() {
  const shopify = useAppBridge();

  return (
    <>
      <button onClick={() => shopify.modal.show('my-modal')}>Open Modal</button>
      <Modal id="my-modal">
        <p>Message</p>
        <TitleBar title="Title">
          <button variant="primary">Label</button>
          <button onClick={() => shopify.modal.hide('my-modal')}>Label</button>
        </TitleBar>
      </Modal>
    </>
  );
}

 

 

 

 

More over can you explain why the primary and secondary action button clicks submit the form? 

Replies 0 (0)