OpenLayers feature of featurecollection removal issue - how to force map refresh?

Question

I have a Features collection loaded as JSON from PostGIS, it is represent a set of vector areas over map (units responsibility alignment). I need to create new, modify and delete existing zones already loaded.

I have started with displaying existing areas and got feature removal BUT since first step is to select it with mouse click and than press "erase" icon, a feature remain in place until I click somewhere outside selected area. So basically saying it is removed from the feature collection successfully, but no map refresh events occurs until manual outside click happens.

I tried a lot of different ways but without any success. Does anyone was successful in resolving similar issue?

Some piece of code:

var selectedFeatureID;

function addSelect() {
    map.removeInteraction(draw);
    singleClick = new ol.interaction.Select();
    map.addInteraction(singleClick);

    singleClick.getFeatures().on('add', function (event) {
       var properties = event.element.getProperties();
       selectedFeatureID = properties.id;
    });
}

function removeSelectedFeature() {
    var features = vectorSource.getFeatures();
    $(features).each(function (i) {
      if (features[i].getProperties().id == selectedFeatureID) {
        vectorSource.removeFeature(features[i]);

      }
    });
}

Answer 1

The re-render of the map should be automatic, I think it's becasue the feature is still selected.

Try to clear the collection of features selected before you remove the feature from the vectorSource like this:

if (features[i].getProperties().id == selectedFeatureID) {
  singleClick.getFeatures().clear();
  vectorSource.removeFeature(features[i]);
}