How to "link" Popover to element on Canvas?

[AlexSKuznetsov]

Hey,

I'm using React Flow library for node-based canvas workflow management.
Currently one of the node has a button with Popover element. When i'm start moving Node Popover keep it's position without moving. How can a fix this?

popover.mp4

Code:

<Popover
        renderWithPortal
        triggerType="custom"
        header="Job info"
        content={
          <SpaceBetween size="s" direction="vertical">
            <Box
              variant="span"
              color="text-label"
              fontWeight="bold"
              fontSize="body-s"
            >
              {label}
            </Box>
            <Box variant="span" color="text-label">
              By default, the job will start automatically when the previous job
              is finished. You can change this behavior by unselecting toggle in
              the name.
            </Box>
          </SpaceBetween>
        }
      >
        <div className={style.infoButton}>
          <Button variant="icon" iconName="status-info" />
        </div>
      </Popover>

[jperals]

Hi Alexander,

The popover relies on scroll or resize events to update its position. I assume the canvas does not trigger such events while dragging, so the popover position will not update.

In other words, a popover in a canvas is not a use case supported by the component at the moment. You might have to implement your own component (if you do, our design tokens might help you maintain consistency with the system), or show the information somewhere else, e.g, in a side panel or a statically positioned overlay.

[AlexSKuznetsov]

Hi Joan, thanks for response.
Is it possible to add in future releases custom prop to manually trigger dragging event or at least to control open/close behaviour?

[jperals]

Hi Alexander,

Thinking about this a bit more, actually the expected behavior would be that the popover closes, rather than it being dragged around. And actually, a mousedown event anywhere else on the page should automatically make the popover close out of the box. Here is the relevant logic in the component and you can also check out this behavior in our playground pages, for example here. And here is a CodeSandbox with a more similar case to yours using board components —if you open the popover and then start dragging the board item, the popover automatically closes.

So the question is why doesn't the popover automatically close in your case when you start dragging (and therefore dispatch a mousedown event)? I found this issue which would explain this behavior if it weren't because it was closed long ago. But just in case let me ask, which version of React Flow are you using?