There is an issue with polaris website Popover and Tooltip components that do not work when Modal Component is in full screen state

Partner Discussions
1

Uploading: Snipaste_2025-02-14_18-34-55.png…
Uploading: Snipaste_2025-02-14_18-36-01.png…
When I use Modal full screen state, the pop-up content of my Popover component is blocked at the bottom layer and cannot be displayed on Modal. May I ask how to solve this problem? Please reply to me if you know it, thank you

2

Hi Pan,

Can you share a screenshot of this behaviour?

3

Snipaste_2025-02-19_16-16-25
Snipaste_2025-02-19_16-16-251668×811 15.4 KB

Thank you for your reply. I want to use this Popover component in the full-screen Moda component, but this situation will occur, and the Tooltip component also has the same problem. Is there any solution for this situation

5

I had the similar issue before.

I needed to add custom CSS.

#your-modal-id {
  .Polaris-Modal-Dialog__Modal,
  .Polaris-Modal__Body {
    overflow: visible !important;
  }
}
7

Excuse me, if you have time, I hope you can reply to me as soon as possible

8

Can you paste your code here, instead of adding it as a screenshot?

10 
import {
    Tooltip,
    Popover,
    ActionList
} from '@shopify/polaris';
import { Modal, TitleBar } from '@shopify/app-bridge-react';

const [popoverActive, setPopoverActive] = useState(false);

    const togglePopoverActive = useCallback(
        () => setPopoverActive((popoverActive) => !popoverActive),
        [],
    );

    const activator = (
        <Button onClick={togglePopoverActive} disclosure>
            More actions
        </Button>
    );

<Modal id="announcementBar" variant="max">
            <TitleBar title="Edit Announcement Bar">
                <button variant="primary">Save</button>
            </TitleBar>
         <Popover
                active={popoverActive}
                activator={activator}
                autofocusTarget="first-node"
                onClose={togglePopoverActive}
            >
                <ActionList
                    actionRole="menuitem"
                    items={[{ content: 'Import' }, { content: 'Export' }]}
                />
            </Popover>
   </Modal>
11

Excuse me, this is my code snippet, do you need to add more

12

Aha, I just noticed you are using Shopify App Bridge Modal. My CSS trick was for Polaris Modal. I will take a look at your code and let you know.

13

Thank you for your help

14

@pan_liu, is this correct one? I saw there is no return. Can you please double check?

15

I’m sorry, can’t the box be popped out? Maybe an open was omitted

<Modal id="announcementBar" variant="max" open={true}>
            <TitleBar title="Edit Announcement Bar">
                <button variant="primary">Save</button>
            </TitleBar>
            <Popover
                active={popoverActive}
                activator={activator}
                autofocusTarget="first-node"
                onClose={togglePopoverActive}
            >
                <ActionList
                    actionRole="menuitem"
                    items={[{ content: 'Import' }, { content: 'Export' }]}
                />
            </Popover>
        </Modal>

I copied this code to my local and it works, rest assured

16

Is this a complicated problem? Or is it that Shopify App Bridge Modal cannot be used with Polaris components? Sorry, I am a little anxious, because this problem has been bothering me for several days, and I am eager to know the reason and solution

17

Excuse me, do you have an answer to this question？

18

@pan_liu You need to wrap the contents of the modal with <AppProvider> for elements like tooltips and autocomplete to be positioned right.

Shopify has this documented here: Using modals in your app

So in your code, I will make this change:

<Modal id="announcementBar" variant="max" open={true}>
     <TitleBar title="Edit Announcement Bar">
             <button variant="primary">Save</button>
       </TitleBar>
    <AppProvider i18n={{}}>  /* <-- Added this */
         <Popover
                active={popoverActive}
                activator={activator}
                autofocusTarget="first-node"
                onClose={togglePopoverActive}
            >
                <ActionList
                    actionRole="menuitem"
                    items={[{ content: 'Import' }, { content: 'Export' }]}
                />
            </Popover>
      </AppProvider>
  </Modal>
1 Like
19

Thank you. I tried. I did. Thanks for helping me out