OpenLayers 3 DragBox not displaying on map

Question

When I shift + drag on the map and release, the 'boxend' listener fires. Additionally, if I inspect the map object after adding the dragBox interaction to the map, the dragBox interaction is in the map object. The issue is that the box is never visible on the map while selecting a region. What am I missing?

 $scope.drawBox = () => {
    const dragBox = new ol.interaction.DragBox({
      condition: ol.events.condition.shiftKeyOnly,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: [0, 0, 255, 1],
          width: 2
        })
      })
    });

    map.addInteraction(dragBox);

    dragBox.on("boxend", function(e) {
      console.log("boxend called"); // listener is triggered
    });
  };

Answer 1

The release of OpenLayers version v3.11.0 changed how you style ol.interaction.DragBox and ol.interaction.DragZoom. Rather than using a style attribute when creating the object, you have to style the feature with CSS.

Old:

 new ol.interaction.DragZoom({
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: [255, 255, 255, 0.4]
        })
      })
    })

New:

.ol-dragzoom {
  border-color: red;
  border-width: 3px;
  background-color: rgba(255,255,255,0.4);
}

Answer 2

I had same problem. I use OL 3.14, and I solve the problem with that CSS:

.ol-dragbox {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(100,150,0,1);
  }