I am attempting to block user input when cssDisableUserInput is true.
So basically within my main tags I have this:
<div id=userinput disabled={cssDisableUserinput}>
<div id="map">
</div>
within my CSS I have:
<style>
#map {
width: 1300px;
height: 800px;
}
#userinput{
width: 1300px;
height: 800px;
pointer-events: none;
}
</style>
And yet it completely blocks user input even when cssDisableUserinput is false.
What is a better approach to blocking user input?
The thing that prevents interaction is pointer-events: none;, not disabled. You cannot disable a div. You might want to extract that property into a separate class and apply that conditionally using your cssDisableUserinput flag.
<div class:disable-events={cssDisableUserinput}>...</div>
<style>
.disable-events { pointer-events: none; }
</style>
(I do not know the Mapbox API, maybe there is a built-in mechanism that would be better suited for achieving this. The above approach may still allow interaction via the keyboard.)