Within my application, there are instances where I need to dim and disable the mouse events for certain div elements based on the component's state - such as when it's loading. My initial approach involved creating a helper function that generates an inline style for dimming an element and deactivating its pointer events, determined by a boolean value:
const disableOnTrue = (flag) => {
return {
opacity: flag ? 0.15 : 1,
pointerEvents: flag ? "none" : "initial"
}
}
This function is then utilized on elements like so:
{loading && {/** render a loading circle */}}
<div style={disableOnTrue(this.state.loading)}>{/** content to be dimmed & disabled while loading */}</div>
However, within these disabled div elements, there are Material-UI Buttons. It was discovered that these buttons disregard the fact that pointerEvents have been disabled on their parent div, remaining clickable which posed a significant issue. Consequently, I resorted to setting disabled={loading} on the Buttons. This action results in the buttons themselves appearing as disabled, compounded with the decreased opacity from the disableOnTrue function. To address this, additional custom styling would be required to maintain the desired disabled appearance of the entire div, rather than solely focusing on the buttons.
Efforts were made to utilize the Backdrop component from Material-UI, but struggles were encountered in getting it to only dim specific elements rather than the entire viewport.
Prior to implementing any makeshift solutions throughout the entirety of my app, I wanted to seek advice here to explore if there exists a more elegant solution that may have eluded me thus far. Despite thorough research, no definitive resolution has been found.