Openlayers: Upgrading from 6.1.1 to 6.2.1 - keyboard and mouse interactions no longer seem to work

[zachsa]

Describe the bug
Mouse/keyboard interactions suddenly stop working.

To Reproduce
Using [email protected] I can interact with the map (click / drag / mouse scroll to zoom / etc)
Using [email protected] I can no longer interact with map at all (but if i have the zoom buttons on the screen, these work)

This is the DOM that is created with 6.1.1

This is the DOM that is created with 6.2.1

<div class="ol" style="width: 100%; height: 100%;">
   <div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
      <div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;">
         <div class="ol-layer" style="position: absolute; width: 100%; height: 100%;">
            <canvas width="1536" height="386" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(1, 0, 0, 1, 0, 0);"></canvas>
         </div>
         <div class="ol-layer" style="position: absolute; width: 100%; height: 100%;">
            <canvas width="1920" height="483" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(0.8, 0, 0, 0.8, 0, 0);"></canvas>
         </div>
      </div>
      <div class="ol-overlaycontainer" style="position: absolute; z-index: 0; width: 100%; height: 100%;"></div>
      <div class="ol-overlaycontainer-stopevent" style="position: absolute; z-index: 0; width: 100%; height: 100%;"></div>
   </div>
</div>

In both the DOM segments the topmost item is div.ol-overlaycontainer-stopevent. So it looks like events should actually be stopped?

i.e. it COULD be that the way I have been using OpenLayers up to this point has really been using this bug. Or it could be that event handling is broken.

Is this a bug? If not, what are the possible reasons that the most recent version of OpenLayers is not allowing me to use keyboard/mouse interactions?

[coastforge-mei]

We also had this problem (not until 6.2) and could make a hotfix in our system using the following CSS statements:

.ol-overlaycontainer, .ol-overlaycontainer-stopevent {
z-index: auto!important;
}
.ol-viewport .ol-layers {
z-index: 1!important;
}
.ol-overlay container {
z-index: 2!important;
}

It's not pretty, but it works. Perhaps something similar can be brought in the standard?

[ahocevar]

Please make sure you have ol/ol.css from v6.2.1 included in your build or html page.

[zachsa]

Adding ol/ol.css solves the problem

[mario-petrovic]

Adding ol/ol.css solves the problem

If you are using Openlayers with Angular, include it in angular.json file. Because importing it in TS file will not bring it in your project:

{
  ...
  "projects": {
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": ["node_modules/ol/ol.css"]
           ...
          },
          ...
        }
        ...
    },
    ...
}