getFeatureInfo in OpenLayers using text/javascript returns unselectable popup

Question

I am trying to make a getFeatureInfo request (OL4) and display a popup with data, that come from a geoserver layer.

Initially I did this:

map.on('click', function (evt) {
          var viewResolution = map.getView().getResolution();
          var coord = evt.coordinate;

            if (grid_layer.getVisible() && grid_layer.get('name') != 'Basemap') {
              var url = grid_layer.getSource().getGetFeatureInfoUrl(coord, viewResolution, 'EPSG:3857', {
                  'INFO_FORMAT': 'text/html',
                  'FEATURE_COUNT': '2',

              });

              if (url) {
                  $("#popup").css("display", "block");
                  popup_overlay.setPosition(coord);
                  content.innerHTML = '<iframe src="' + url + '" id="id_iframe" style="border:0px #BD8D46 dotted;" scrolling="auto" frameborder="no" align="center"></iframe>';
              }

            }
        });

I take care of the style using the *.ftl styling method on geoserver. This works more or less ok but it also creates a blank popup when I click anywhere on the map.

I checked online and I found some other solution, which I try to implement below:

map.on('click', function (evt) {
          var viewResolution = map.getView().getResolution();
          var coord = evt.coordinate;

            if (grid_layer.getVisible() && grid_layer.get('name') != 'Basemap') {
              var url = grid_layer.getSource().getGetFeatureInfoUrl(coord, viewResolution, 'EPSG:3857', {
                  'INFO_FORMAT': 'text/javascript',
                  'FEATURE_COUNT': '2',

              });

              if (url) {
                var parser = new ol.format.GeoJSON();
                console.log(parser)
                $.ajax({
                      url: url,
                      dataType: 'jsonp',
                      jsonpCallback: 'parseResponse'
                    }).then(function(response) {
                      var result = parser.readFeatures(response);
                      if (result.length) {
                        console.log(result)
                        var iso3 = [];
                        for (var i = 0, ii = result.length; i < ii; ++i) {
                          iso3.push(result[i].get('iso3_all'));
                        }

                        $("#popup").css("display", "block");
                        popup_overlay.setPosition(coord);
                        content.innerHTML = iso3.join(',');
                      }
                    });
              }
            }
        });

Although this solution seems to work initially, I can not actually select the content of my popup window. It's not selectable (not possible to copy paste it etc.)

For example in the below screenshot the text of the popup is is selectable:

I am not sure why this is happening and if its related with the CSS of the popup but I haven't changed something in relation to the first snippet. Also when I interact with the application (zoom and click), I get the following error. Maybe it somehow related.:

parseResponse is not a function

Answer 1

Since the problem was solved by upgrading from OL4 to OL5, I'll write this answers for somebody who would want to stick with OL4.

OL4 wraps popup in a div container with css class ol-selectable, which looks like this:

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto
}

Definition says that auto means Text can be selected if the browser allows it. I tried Chrome, Firefox and IE11. All them interpret auto as selection not allowed.

There are two solutions to this. One is to generally override ol-selectable with definition that allows text selection:

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text
}

The other is to define our own class and apply it to div wrap of our html popop content:

.my-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text
}

...
content.innerHTML = '<div class="my-selectable">' + iso3.join(',') + '</div>';
...

Why was popup text selectable in the first example? Beacuse it was wraped in iframe with its own set of css rules.