Bug #3255
Filter Dropdowns on Locations Page Render Above "Offline Alerts & Fault Monitoring" Modal
Added by Shreya Agarwal 8 days ago.
Updated 8 days ago.
Description
On the Locations page, when a user opens any of the filter dropdowns (Search, City Filter, State Filter, Category Filter, Type Filter, Status Filter), and the "Offline Alerts & Fault Monitoring" modal/popup appears automatically (triggered periodically), the filter dropdowns render on top of the modal instead of behind it. This breaks the expected UI layering — the modal should always appear above all page-level elements, including filter dropdowns.
On the Location Management page when a user opened any of the filter dropdowns (such as City, State, Category, Type, or Status Filter) and the periodic "Offline Alerts & Fault Monitoring" popup (FaultMonitoringModal) appeared on the screen, the open dropdown menu remained visible and overlapped in front of the alert modal and its backdrop. This created an incorrect UI stacking order
This occurred because a legacy global <style> tag in AddEditLocationModal.tsx was forcing all Material-UI popovers to an excessively high z-index of 99998 !important, overriding the alert modal's z-index of 2000.
To fix this safely without side effects, the global style block in AddEditLocationModal.tsx was cleanly commented out with clear explanatory notes for future reference instead of being deleted. Additionally, MenuProps was added to all filter dropdowns in LocationList.tsx to keep their z-index at the standard 1300 level with a scrollable maxHeight of 300px, and the modals were wrapped in conditional rendering so they only mount when opened.
Also available in: Atom
PDF