SitePicker, ListPicker & FieldPicker occasionally show options in background when using it in a dialog

[tmaestrini]

I've made a SPFx extension that renders a modal dialog with some content (text content, TreeView, Menu Bars, input fields) beside a SitePicker, a ListPicker and a FieldPicker. The drowdown options are occasionally rendered behind the modal window which makes them unselectable.

Category

[ ] Enhancement [x] Bug [ ] Question

Version

Please specify what version of the library you are using: 3.17.0

Expected / Desired Behavior / Question

The dropdown options of the components should render in the foreground.

Observed Behavior

After bootstrapping the dialog, the dropdown options of the SitePicker, the ListPicker and the FieldPicker components are rendered, and while remaning «in the background» (behind the modal dialog) they're not selectable anymore. It looks like the component would have a negative z-index in the style attribute – but that's not the case. Refreshing the whole browser window can help from time to time. I have not yet found any pattern in this behaviour.

Steps to Reproduce

1. Refresh the page
2. Click the SPFx extension that opens the modal dialog
3. Select the ListPicker / SitePicker or FieldPicker to bring up the dropdown options

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[vofflan]

I have the same problem and I'm running on version 3.16.0. Any progress on this yet?

[GuidoZam]

Probably this is the same issue as this one: https://github.com/SharePoint/sp-dev-docs/issues/9515

[tmaestrini]

Any effort or news on this issue?

[tmaestrini]

Any news?

[gjerm]

I'm seeing this issue as well, but while using a PeoplePicker in a Panel which is triggered through a List View Command. The first time the command is triggered, the suggestions list shows up properly, and the HTML looks roughly like this:

<div class="ms-Layer ms-Layer--fixed root-238 data-portal-element="true">
	<div class="ms-Fabric ms-Layer-content content-240">
		<!-- This is where the panel is -->
	</div>
</div>
<div id="fluent-default-layer-host" style="style="position: fixed; z-index: 1000000;">
	<div class="ms-Layer ms-Layer--fixed root-238 data-portal-element="true">
		<div class="ms-Fabric ms-Layer-content content-240">
			<!-- This is where the callout is, which contains the suggestion list -->
		</div>
	</div>
</div>

After dismissing the panel and re-triggering it, the elements have swapped places:

<div id="fluent-default-layer-host" style="style="position: fixed; z-index: 1000000;">
	<div class="ms-Layer ms-Layer--fixed root-238 data-portal-element="true">
		<div class="ms-Fabric ms-Layer-content content-240">
			<!-- This is where the callout is, which contains the suggestion list -->
		</div>
	</div>
</div>
<div class="ms-Layer ms-Layer--fixed root-238 data-portal-element="true">
	<div class="ms-Fabric ms-Layer-content content-240">
		<!-- This is where the panel is -->
	</div>
</div>

(The root-238 class gives z-index: 1000000)

And the suggestions list is shown behind the panel. It looks like the order in which the elements are inserted is inconsistent, and since they get the same z-index it can occasionally show up behind a panel/modal (Adding 1 to the z-index of the #fluent-default-layer-host manually makes the dropdown show up correctly)

[pheidler]

@gjerm Thank you!