onInput issue ui-modal

Polaris
1

Hi,

onInput does not fire in modal but works fine normally in non modal UI

      <ui-modal id="my-modal">
        <s-search-field
          label="Search"
          name="search"
          onInput={(e) => console.log('Real-time:', e.target.value)}
          onChange={(e) => console.log('Final value:', e.target.value)}
        />
        <ui-title-bar title="Title">
          <button variant="primary">Label</button>
          <button onclick="document.getElementById('my-modal').hide()">Label</button>
        </ui-title-bar>
      </ui-modal>

      <button type="button" onClick={() => document.getElementById("my-modal").show()}>Open Modal</button>

How to handle this in web component?

2

I’m also having javascript issues with the ui-modal. Alpine and Turbo are not working.

It looks like vanilla js is the only way to make javascript work inside ui-modal.

<ui-modal id="my-modal">
  <div>
    <p>Message</p>
    <button id="add-content">Add element</button>
  </div>
</ui-modal>

<button onclick="document.getElementById('my-modal').show()">Open Modal</button>

<script>
  const button = document.getElementById('add-content');
  button.addEventListener('click', () => {
    const p = document.createElement('p');
    p.textContent = 'Lorem ipsum';

    const modal = document.getElementById('my-modal');
    modal.content.appendChild(p);
  });
</script>
3

yea .. i think it shadow DOM is not handled properly.. onClick had same issues. Today for modal i have shifted back to react as of now

4

The ui-modal is a remote dom and can be controlled from outside using custom events. That’s one of the main reasons the js is not working as expected.

https://shopify.dev/docs/api/app-bridge-library/web-components/ui-modal?example=using-a-src-url-to-load-content-communicating-between-the-modal-and-the-parent-window

5

i did not try using another form as a source. Did you test the events? working properly?

6

Instead of that, you can try

 <ui-modal id="my-modal">
        <s-search-field
          label="Search"
          name="search"
        />
        <ui-title-bar title="Title">
          <button variant="primary">Label</button>
          <button onclick="document.getElementById('my-modal').hide()">Label</button>
        </ui-title-bar>
      </ui-modal>


<script>
  let search = document.querySelector('[name="search"]')
  search.addEventListener('onChange', (e) => {
  console.log('input changed', e)
  })
  
  search.addEventListener('onInput', (e) => {
  console.log('input changed', e)
  })
</script>
7

yeah this is exactly I did that but as my modal got slightly complex.. handling events became complicated and not worth the effort

8

Same for us. We are not going to use the ui-modal for our editor.

Before, we were using the Fullscreen from @shopify/app-brige/actions

9

This is not really well documented, but to be able to use Modal without all those manual event binding you need to wrap the content with the AppProvider component:

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

return (
  <Modal>
    <TitleBar></TitleBar>

    <AppProvider>
     // The content
    </AppProvider>
  </Modal>
)
10

are you sure.. You are using React components in your example

11

Modal and TitleBar are the app bridge react components (they are thin wrapper around the / ). Those are different from the Modal React components.

12

no we were discussing the web modal component. There are no issue with react modal

13

The Modal from App bridge is the web component modal.

1 Like