Polaris Autocomplete options rendering outside App Bridge Modal

[alex_0715]

Hi everyone,

I’m trying to use the Polaris <Autocomplete> component inside an App Bridge React <Modal>, but I’m running into a z-index and portal issue.

The dropdown options from Autocomplete are rendering **outside of the modal container, and as a result, they appear behind the modal’s backdrop.

Here’s what I tried:
Added position: relative to the modal wrapper.
Used zIndexOverride on Autocomplete.
Wrapped Autocomplete in a <div> with a high z-index.

But none of these worked since Autocomplete uses a Portal internally and renders outside the modal DOM tree.

Is there an official Shopify-supported way to:

1. Force Autocomplete’s dropdown to render inside the App Bridge Modal DOM tree?
2. Or prevent the backdrop from covering it?

Would it be better to replace Autocomplete with Polaris <Combobox> when used inside modals, as I’ve seen in some Shopify examples?

Any insights or recommended best practices would be appreciated!

[Alan_G]

Hey @alex_0715 the behaviour you’re mentioning there is usually expected (there’s a bit more info in our docs here on React portals)

You may want to look at using AppProvider if you’re building a remix app, which should allow you to extend the native Polaris app provider to accomplish something like this.

Combobox itself should also definitely work for your use case, since you could use its allowMultiple prop to support multi-actions if needed as well.

Hope this helps/makes sense - let me know if I can clarify anything on my end here!

[alex_0715]

The Autocomplete popover is currently inheriting the size of the modal (as shown in the screenshot), but I want it to open in its normal default size—even if that means it overflows or appears larger than the modal.

How can I make the Autocomplete popover render at its default size and not be constrained by the modal?