Bugfix: return nearest non-null point on interaction when spanGaps=true

src/core/core.interaction.js

@@ -22,10 +22,30 @@ import {_isPointInArea} from '../helpers/index.js';
 function binarySearch(metaset, axis, value, intersect) {
   const {controller, data, _sorted} = metaset;
   const iScale = controller._cachedMeta.iScale;
+  const spanGaps = metaset.dataset ? metaset.dataset.options ? metaset.dataset.options.spanGaps : null : null;
+
   if (iScale && axis === iScale.axis && axis !== 'r' && _sorted && data.length) {
     const lookupMethod = iScale._reversePixels ? _rlookupByKey : _lookupByKey;
     if (!intersect) {
-      return lookupMethod(data, axis, value);
+      const result = lookupMethod(data, axis, value);
+      if (spanGaps) {
+        const {vScale} = controller._cachedMeta;
+        const {_parsed} = metaset;
+
+        const distanceToDefinedLo = (_parsed
+          .slice(0, result.lo + 1)
+          .reverse()
+          .findIndex(
+            point => point[vScale.axis] || point[vScale.axis] === 0));
+        result.lo -= Math.max(0, distanceToDefinedLo);
+
+        const distanceToDefinedHi = (_parsed
+          .slice(result.hi - 1)
+          .findIndex(
+            point => point[vScale.axis] || point[vScale.axis] === 0));
+        result.hi += Math.max(0, distanceToDefinedHi);
+      }
+      return result;
     } else if (controller._sharedOptions) {
       // _sharedOptions indicates that each element has equal options -> equal proportions
       // So we can do a ranged binary search based on the range of first element and

test/specs/core.interaction.tests.js

@@ -912,4 +912,62 @@ describe('Core.Interaction', function() {
       expect(elements).toContain(firstElement);
     });
   });
+
+  it('should select closest non-null elements if spanGaps=true and closest non-null element is to the left', function() {
+    const chart = window.acquireChart({
+      type: 'line',
+      data: {
+        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        datasets: [{
+          data: [12, 19, null, null, null, null, 5, 2, 3],
+          spanGaps: true,
+        }]
+      }
+    });
+    chart.update();
+    const interactionPointIndex = 3;
+    const meta = chart.getDatasetMeta(0);
+    const point = meta.data[interactionPointIndex];
+
+    const evt = {
+      type: 'click',
+      chart: chart,
+      native: true, // needed otherwise things its a DOM event
+      x: point.x,
+      y: point.y,
+    };
+
+    const expectedInteractionPointIndex = 1;
+    const elements = Chart.Interaction.modes.nearest(chart, evt, {axis: 'x', intersect: false}).map(item => item.element);
+    expect(elements).toEqual([meta.data[expectedInteractionPointIndex]]);
+  });
+
+  it('should select closest non-null elements if spanGaps=true and closest non-null element is to the right', function() {
+    const chart = window.acquireChart({
+      type: 'line',
+      data: {
+        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        datasets: [{
+          data: [12, 19, null, null, null, null, 5, 2, 3],
+          spanGaps: true,
+        }]
+      }
+    });
+    chart.update();
+    const interactionPointIndex = 4;
+    const meta = chart.getDatasetMeta(0);
+    const point = meta.data[interactionPointIndex];
+
+    const evt = {
+      type: 'click',
+      chart: chart,
+      native: true, // needed otherwise things its a DOM event
+      x: point.x,
+      y: point.y,
+    };
+
+    const expectedInteractionPointIndex = 6;
+    const elements = Chart.Interaction.modes.nearest(chart, evt, {axis: 'x', intersect: false}).map(item => item.element);
+    expect(elements).toEqual([meta.data[expectedInteractionPointIndex]]);
+  });
 });