primefaces
Dropdown panel becomes invisible when DevTools is open — z-index overlay issue (PrimeReact 10.8.3)
Describe the bug
When opening the PrimeReact <Dropdown> 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
-
Render a simple <Dropdown> component.
-
Open Chrome DevTools (F12).
-
Click to open the dropdown.
-
The panel is not visible, but the DOM shows the overlay container exists.
-
Manually edit CSS in DevTools:
Expected behavior
The dropdown options panel should remain visible even when DevTools is open.
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)}
/>
};
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.
Worth noting that if the DevTools pane is detached as an independent window, the overlays work correctly.
