Open Popover makes screen scroll infinite

[Albertlarsen]

Description of the bug

https://github.com/digdir/designsystem/assets/31471142/681e7f2e-b384-42cf-88bf-5998eac22e0f

Steps To Reproduce

1. Open Popover,
2. Scroll to the right

Additional Information

No response

[mimarz]

Thanks for reporting this!

This is most likely due to it not being inside a React Portal, I was hoping we could avoid this as it adds an additional complexity with SSR, but oh well 🤷‍♂

We are using floatin-ui for the portal so this should be solved using their FloatingPortal component. It should be opt-in for rendering to be inside a portal so I suggest having a prop such as withinPortal to enable portal rendering.

[mimarz]

Do you want to have a look at this @Barsnes ?

[Barsnes]

Hey, this does not look good! I'll have a look at it this week. Would you mind sharing the bit of code where this happens as well?

[Albertlarsen]

Yeah, no problem 😊

          <Popover
              variant={'warning'}
              trigger={
                <Button
                  variant='tertiary'
                  color={delegableChosenServices.length > 0 ? 'danger' : 'first'}
                  onClick={() => setPopoverOpen(true)}
                  fullWidth
                >
                  {t('common.cancel')}
                </Button>
              }
              onOpenChange={() => setPopoverOpen(!popoverOpen)}
              placement={'top'}
              open={popoverOpen}
            >
              <Paragraph>{t('single_rights.cancel_popover_text')}</Paragraph>
              <GroupElements>
                <Button
                  onClick={onCancel}
                  color={'danger'}
                  variant={'primary'}
                >
                  {t('common.yes')}
                </Button>
                <Button
                  onClick={() => setPopoverOpen(false)}
                  color={'danger'}
                  variant={'tertiary'}
                >
                  {t('single_rights.no_continue_delegating')}
                </Button>
              </GroupElements>
            </Popover>

[Barsnes]

Thanks! It seems like you are using an older version of our popover, the trigger has been replaced with anchorEl. Could you update to the latest version of Designsystemet, and replace it with the new Popover? You can read the documentation here

[Albertlarsen]

Oh sorry my bad, didn't realize a brand new Popover had been released, haven't gotten to update it yet but I'll do it as soon as possible

[Barsnes]

No worries! Test it out when you can, and give me an update if the issue persists

[Barsnes]

Closing this issue since using the new version of the Popover solved this issue.