Svelte prevent user input on mapbox

Question

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?

Answer 1

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.)