Dropdown panel becomes invisible when DevTools is open — z-index overlay issue (PrimeReact 10.8.3)

[parthdham15]

Describe the bug

When opening the PrimeReact component while Chrome DevTools is open, the dropdown panel becomes invisible.
The DOM shows the overlay element is present, but it is not visible unless we manually increase the z-index value.

This appears to be a global z-index / stacking-context bug in PrimeReact 10.x overlay logic.

Reproducer

No response

System Information

PrimeReact Version:10.8.3

React Version:18.3.1

Browser Google Chrome: 138.0.7204.184

Steps to reproduce the behavior

1. Render a simple component.

2. Open Chrome DevTools (F12).

3. Click to open the dropdown.

4. The panel is not visible, but the DOM shows the overlay container exists.

5. Manually edit CSS in DevTools:

Expected behavior

The dropdown options panel should remain visible even when DevTools is open.

[ramitvakil-fsl]

I am also facing this issue. earlier we were not facing this issue. but when i moved from cra to vite 5.x, react 18.3.x, chrome - 142.0.7444.176 (Official Build) (64-bit), edge also -Version 142.0.3595.94 (Official build) (64-bit). not sure if it was browser or cra to vite upgrade. and surprisingly only when dev tools is open it causes the issue and works perfectly when dev tools is not open. I have created a wrapper component to use prime react - Dropdown component. my code is like :

`
const handleDropdownShow = () => {
interactionStartRef.current = Date.now();
};

const handleDropdownHide = () => {
if (interactionStartRef.current) {
const duration = Date.now() - interactionStartRef.current;
totalTimeRef.current += duration;
interactionStartRef.current = null;
dispatch(
updateField({
field: ${id}.duration,
value: (totalTimeRef.current / 1000)?.toFixed(2),
}),
);
}
};

const collectOptions = () => {
let opp = checkDependencies(VALUE_DEPENDENCY);
if (!opp?.length) {
opp = options;
}
if (JSON.stringify(opp) !== JSON.stringify(optionsWithLabel)) {
setOptionsWithLabels(opp);
}
return opp;

options={collectOptions()} onChange={(e) => { handleChange(e, dataObj?.DATA_TYPE); }} onShow={() => { if (features?.TIMER) handleDropdownShow(); }} onHide={() => { if (features?.TIMER) handleDropdownHide(); }} style={{ height: heightCal, width: "100%", }} optionLabel={"label"} disabled={disabled} filter={features?.SEARCH_ENABLE || false} showClear={showClear} panelClassName="custom-dropdown" itemTemplate={itemTemplate(props)} valueTemplate={valueTemplate(props)} />

};

);`

[VasiliPodoplielov]

I have the same issue and it is related to almost all overflow-based components: Calendar, Dialog, Accordion, Dropdown etc. If DevTools is open - I see only dark "mask" from Dialog and there is no dialog.

[alecrt]

Same problem here, both in Edge and Chrome (latest versions)

[joelalejandro]

Worth noting that if the DevTools pane is detached as an independent window, the overlays work correctly.

[sassomedia]

This is not a PrimeReact issue, but a Chromium issue. Refer to #8338

[melloware]

Yes this is waiting on Chromium release which I think is due any day now