Polaris Popover content is hidden behind app-bridge-react Modal

[sixkin-stephens]

Summary

I have a Card with DatePicker in a Popover on an app bridge Modal (though the type of PopOver content itself is immaterial).

This issue is that when the PopOver is activated, the Popover content is hidden behind the Modal.

Expected behavior

The Popover content should be visible and appear over the Modal.

Actual behavior

When activated, the Popover content is hidden behind the app bridge Modal:

When I hide the Modal via Chrome dev tools, you can see the hidden Popover content:

Apparently there are two separate divs with the same id=PolarisPortalsContainer. One appears to be associated with the App Bridge, and the other for the app extension itself. Seems like this use case is related to the Popover portal being created in the app's PolarisPortalsContainer vs the Modal's PolarisPortalsContainer.

I tried messing around with z-index and portals, but didn't get anywhere.

Steps to reproduce

The issue is easily reproducible.

@shopify/app-bridge-react: ^4.1.3
@shopify/polaris: 13.0.0

However, I tried to create a codesandbox with the reproducible case, but I got a "TypeError
a.show is not a function" error from the '@shopify/app-bridge-react' Modal.

So here's the reproducible test case code:

import { Modal, TitleBar } from '@shopify/app-bridge-react';
import { BlockStack, Box, Card, DatePicker, Icon, Popover, TextField } from '@shopify/polaris';
import { CalendarIcon } from '@shopify/polaris-icons';
import { useState } from 'react';

export default function TestPage() {
  const [visible, setVisible] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [{ month, year }, setDate] = useState({
    month: selectedDate.getMonth(),
    year: selectedDate.getFullYear(),
  });
  const formattedValue = selectedDate.toISOString().slice(0, 10);

  function handleMonthChange(month: any, year: any) {
    setDate({ month, year });
  }

  function handleDateSelection({ end: newSelectedDate }: any) {
    setSelectedDate(newSelectedDate);
    setVisible(false);
  }

  return (
    <Modal variant="max" open>
      <TitleBar title="Modal"></TitleBar>
      <BlockStack gap={{ xs: '2000', sm: '1000' }}>
        <Box maxWidth="300px" padding={{ xs: '200' }}>
          <Popover
            active={visible}
            autofocusTarget="none"
            preferredAlignment="left"
            fullWidth
            preferredPosition="below"
            onClose={() => setVisible(false)}
            activator={
              <TextField
                role="combobox"
                label="Date"
                prefix={<Icon source={CalendarIcon} />}
                value={formattedValue}
                onFocus={() => setVisible(true)}
                autoComplete="off"
              />
            }
          >
            <Card>
              <DatePicker
                month={month}
                year={year}
                selected={selectedDate}
                onMonthChange={handleMonthChange}
                onChange={handleDateSelection}
              />
            </Card>
          </Popover>
        </Box>
      </BlockStack>
    </Modal>
  );
}

Are you using React components?

Yes

Polaris version number

13.0.0

Browser

Chrome: 124.0.6367.62

Device

MacBook Pro (Intel) with macOS 14.3.1