ui5-responsivePopover: when open the ui5-responsivePopover, it moves from other place to the target openBy element place.

Hi colleague, i am from Successfactors team.Please help to take a look at this issue.

Describe the bug When open the ui5-responsivePopover, the popover showing at other place at first, then move to the target openBy element place. Expected: it should be located at the openBy element place directly when first showing.

To reproduce Steps to reproduce the behavior:

1. Create one responsivePopover and openBy button, click on button to open the responsivePopover
2. Only render responsivePopover when isResponsivePopoverOpen=true

const [isResponsivePopoverOpen, setResponsivePopoverOpen] = useState(false);
const handleButtonClick = () => { 
   setResponsivePopoverOpen(true); 
   resPopoverRef.open(buttonRef) 
};
return (
    <ui5-button ref={buttonRef} onClick={handleButtonClick}>Open Popover</ui5-button>
    {isResponsivePopover && (
        <ui5-responsive-popover ref={resPopoverRef} header-text="Newsletter subscription">
	      <div class="popover-content">
		    <ui5-label for="emailInput" required>Email: </ui5-label>
	      </div>
        </ui5-responsive-popover>
    )}
)

Expected behavior ui5-responsivePopover should be located at the openBy element place directly when first showing.

Screenshots

[SherrySherry123]

Hi @fifoosid ,

Here is the example https://codesandbox.io/s/quirky-driscoll-g6seb?file=/src/App.js.

Regards, Sherry

[SherrySherry123]

Thanks @fifoosid for the quick response and kindly explanation, the proposed solution works for me.

Regards, Sherry