[Bug] Widgets render below react-map-gl basemap

[TylerMatteo]

Description

I am unable to interact with the ZoomWidget and CompassWidget components when used alongside a react-map-gl basemap with the reverse-controlled method.

The widgets render but are effectively inert because they are "below" the div rendering the basemap. I can get them to work using the browser dev tools by either:

• Setting a negative z-index on the basemap div
• Setting a high positive z-index on the div that wraps the widgets
• Moving the widgets div to come after the basemap div in the DOM

I tried setting z-indexes on the basemap or the widgets using their respective style properties but that doesn't seem to work because those styles are applied too deep in the tree.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

I can use the widgets module alongside my basemap rendering method and am able to interact with the widgets as expected.

Steps to Reproduce

Here is a link to a branch of a repo that can be used to reproduce this issue: https://github.com/TylerMatteo/react-deck-boilerplate/tree/widget-bug-repro

To reproduce:

1. Clone this repo and check out the widget-bug-repro branch
2. npm install
3. npm run dev
4. Observe that clicking the widgets does not trigger zooming or resetting the compass

Environment

• Framework version: deck.gl@9.0.14
• Browser: Firefox 125.0.3
• OS: MacOS Ventura 13.5

Logs

N/A

[atmorling]

I've struggled to find a clean way to reorder the divs, and to me it doesn't look like one should, but I'm happy to be wrong.

I have tested adding viewContainer.style.zIndex = '1'; in WidgetManager here and adding zIndex: -1 to position-children-under-views() here.

Doing either of these fixes the problem.