When clicking an inactive feature in direct_select, select it

With this, you don't have to click twice to select another feature when
you are in direct_select.

The mode will still be changed to simple_select. So if you want to
activate direct_select for another feature, you have to click it twice,
but that's still one less click than before.

src/modes/direct_select.js

@@ -98,8 +98,9 @@ DirectSelect.clickNoTarget = function () {
   this.changeMode(Constants.modes.SIMPLE_SELECT);
 };
 
-DirectSelect.clickInactive = function () {
-  this.changeMode(Constants.modes.SIMPLE_SELECT);
+DirectSelect.clickInactive = function (state, e) {
+  const featureId = e.featureTarget.properties.id;
+  this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [featureId] });
 };
 
 DirectSelect.clickActiveFeature = function (state) {

test/direct_select.test.js

@@ -273,6 +273,22 @@ test('direct_select', (t) => {
     });
   });
 
+  t.test('direct_select - clicking an inactive feature should select it', (st) => {
+    const [lineId] = Draw.add(getGeoJSON('line'));
+    const [polygonId] = Draw.add(getGeoJSON('polygon'));
+    Draw.changeMode(Constants.modes.DIRECT_SELECT, {
+      featureId: lineId
+    });
+    const clickAt = getGeoJSON('polygon').geometry.coordinates[0][0];
+    afterNextRender(() => {
+      click(map, makeMouseEvent(clickAt[0], clickAt[1]));
+      afterNextRender(() => {
+        t.equal(Draw.getSelectedIds().indexOf(polygonId) !== -1, true, 'polygon is now selected');
+        cleanUp(() => st.end());
+      });
+    });
+  });
+
   document.body.removeChild(mapContainer);
   t.end();
 });