Wrong position for list items of nimble-select after scrolling nimble-dialog

🐛 Bug Report

See AzDo bug 3951459

Hello Team,

I made a nimble-dialog to edit an entity, there is approximatively 17 fields to be edited, 5 of them with nimble-select.

The nimble-dialog displays an horizontal scrollbar.
Edit: sorry I meant vertical.

When opening for the first time a nimble-select, the list items popup displays correctly under the nimble-select. If scroll the dialog up or down and reopens the same nimble-select, the list items popup displays at its previous position, not under the new position of the nimble-select.

💻 Repro or Code Sample

<nimble-dialog>

<span slot="title">Title</span>

<h2>First section</h2>
<div class="container-grid">
<div>Report:</div>
<div><nimble-select> ... </nimble-select></div>
<div>Name:</div>
<div><nimble-text-field/></div>
<div>Workspace:</div>
<div><nimble-select> ... </nimble-select></div>
</div>
<h2>Second section</h2>
<div class="container-grid">
<div>Rhythm:</div>
<div><nimble-select> ... </nimble-select></div>
<div>Days:</div>
<div><nimble-checkbox/></div>

...
</nimble-dialog>

🤔 Expected Behavior

I expect the popup with option values to show below the nimble-select even after scrolling up/down the dialog

😯 Current Behavior

The popup remains on the position where it previously was, not the new scrolled position of the nimble-select

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: Windows
• Browser: Microsoft Edge, Mozilla FireFox
• Version: confirmed since nimble-angular 33.3.4, maybe older

Start by reproducing the issue with nimble-select inside a vertically scrollable nimble-dialog, then inspect the positioning behavior when the dialog is scrolled and the select is reopened. Done means the option popup appears below the nimble-select at its current position after scrolling, including in Edge and Firefox.