Form fields don't work inside modal

Polaris
1

Hello,

In both React 18 and React 19, the input event does not work in modal. Reproduction:

const [val, setValue] = useState('');

<ui-modal>
  <ui-title-bar title="Test"></ui-title-bar>

  <s-text-field
      label="Test"
      value={val}
      onInput={() => console.log('Never called')}
  />
</ui-modal>
2

Hey again @bakura10 - thanks for flagging this! My understanding is that we haven’t rolled out support for React 19 yet (more info here), but if this is also occurring with React 18 it is definitely odd.

I’ll take a look into this on my end and loop back with you.

4

Hey @bakura10 :waving_hand: , just following up, I’ve got an answer/fix for you here.

In @shopify/app-bridge-react, we’re now using Modal instead of the “raw” ui-modal. The below should work and resolve the issue:

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

const [val, setValue] = useState('');

<Modal>
  <ui-title-bar title="Test"></ui-title-bar>

  <s-text-field
      label="Test"
      value={val}
      onInput={() => console.log('Never called')}
  />
</Modal>

Hope this helps, let me know if I can clarify anything further or if you’re still seeing issues as always, happy to help!

5

Thanks! Is this a long term fix or a temporary fix? It feels strange to use web components everywhere but having ot use React component just for this one.

6

Hey @bakura10 - no worries! My understanding is that with custom elements used in App Bridge’s Modal, by design we do require developers to attach the event to the element itself. At the moment, it can’t be attached to a global definition (ex: body, document) and it won’t propagate as in the modal iframe context. So this would be more of a permanent solution for sure.

Just out of curiosity, in App Bridge, are you seeing that you can use web components elsewhere? If so, I’m happy to flag that with the team so we can take a closer look :slight_smile:

7

Hi :),

From my understanding, <Modal> is really just a thin wrapper around <ui-modal>. Considering that we can use <ui-title-bar>, I think it would be nice to ensure that <ui-modal> would work consistently without having to use the react component.

8

Thanks for clarifying and mentioning this @bakura10! My understanding is that the reason for this difference is that <ui-modal> renders its content in an iframe for security and isolation purposes. This creates some unique challenges with event propagation that the React Modal wrapper handles for you behind the scenes. Specifically, the wrapper bridges events between the iframe context and your app’s context, which is why onInput and other events work correctly when using it.

I’ll reach out to some folks internally to confirm this though and reach back out to you here once I’ve either got some more info or escalated a feature request!

10

Hey @bakura10. just looping back with you here.

I was able to speak with our team, and they confirmed that the React Modal component does a bit more than just wrap <ui-modal>. Due to the different modal types we support (some render in iframes for security/isolation, others render content directly), the React component handles additional complexity behind the scenes to ensure consistent behavior across all modal types - including proper event propagation. I can’t share too much about the internal reasoning for this, but I did just want to close the loop with you here in case it’s helpful.

I definitely get where you’re coming from when it comes to using web components consistently throughout your app though, but the React Modal wrapper is currently the recommended approach to ensure all functionality works as expected at the moment.

I’ll definitely pass along your feedback about wanting better native web component support for modals. As we’ve talked about before, that is one of the major philosophies behind Unified Polaris, so your feedback on this is really appreciated and welcome for sure.

In the meantime, using the React Modal from @shopify/app-bridge-react is still the best solution for reliable modal functionality. Let me know if you have any other questions, happy to chat!