fix(filter-field): Fixes a bug where the range overlay was not closed.

apps/components-e2e/src/components/filter-field/filter-field.e2e.ts

@@ -27,6 +27,7 @@ import {
   getFilterfieldTags,
   tagOverlay,
   setupSecondTestScenario,
+  filterFieldRangePanel,
 } from './filter-field.po';
 import { Selector } from 'testcafe';
 import { waitForAngular, resetWindowSizeToDefault } from '../../utils';
@@ -287,3 +288,31 @@ test('should remove all removable filters when clicking the clear-all button', a
     .expect(filterTags.count)
     .eql(1);
 });
+
+test('should close the range when blurring the filter field mid filter, returning back and deleting the current filter', async (testController: TestController) => {
+  // Setup the second datasource.
+  await testController
+    .click(setupSecondTestScenario)
+    // Wait for the filterfield to catch up.
+    .wait(500);
+
+  await clickOption(2);
+
+  await testController
+    .click(Selector('.outside'))
+    .expect(filterFieldRangePanel.exists)
+    .notOk();
+
+  // Focus the filter field again,
+  // press backspace - deleting the current filter
+  // the range should now be closed.
+  await focusFilterFieldInput();
+  await testController
+    .expect(filterFieldRangePanel.exists)
+    .ok()
+    .wait(250)
+    .pressKey('backspace')
+    .wait(250)
+    .expect(filterFieldRangePanel.exists)
+    .notOk();
+});

apps/components-e2e/src/components/filter-field/filter-field.po.ts

@@ -22,13 +22,13 @@ export const option = (nth: number) => Selector(`.dt-option:nth-child(${nth})`);
 export const clearAll = Selector('.dt-filter-field-clear-all-button');
 export const filterTags = Selector('dt-filter-field-tag');
 export const tagOverlay = Selector('.dt-overlay-container');
+export const filterFieldRangePanel = Selector('.dt-filter-field-range-panel');
 
 export const input = Selector('input');
 
 export const switchToFirstDatasource = Selector('#switchToFirstDatasource');
 export const switchToSecondDatasource = Selector('#switchToSecondDatasource');
 export const setupSecondTestScenario = Selector('#setupSecondTestScenario');
-
 export function clickOption(
   nth: number,
   testController?: TestController,

libs/barista-components/filter-field/src/filter-field.ts

@@ -451,6 +451,11 @@ export class DtFilterField<T>
             // show the panel again.
             // Note: Also trigger openPanel if it already open, so it does a reposition and resize
             this._autocompleteTrigger.openPanel();
+            // If a range is currently open but an autocomplete should be shown
+            // we need to close the range panel again.
+            if (this._filterfieldRange.isOpen) {
+              this._filterfieldRangeTrigger.closePanel();
+            }
           } else if (isDtRangeDef(this._currentDef)) {
             this._filterfieldRangeTrigger.openPanel();
             this._filterfieldRangeTrigger.range.focus();