fix using global format in header fiter in dataGrid

Author: GoodDayForSurf

packages/devextreme/js/__internal/ui/number_box/m_number_box.mask.ts

@@ -12,6 +12,7 @@ import {
   isDefined, isFunction, isNumeric, isString,
 } from '@js/core/utils/type';
 import type { Properties } from '@js/ui/number_box';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 
 import NumberBoxBase from './m_number_box.base';
 import {
@@ -92,9 +93,18 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
     };
   }
 
+  _getEffectiveFormatOption() {
+    const format = this.option('format');
+    return isDefined(format)
+      ? format
+      : getGlobalFormatByDataType('number');
+  }
+
   _getTextSeparatorIndex(text) {
     const decimalSeparator = number.getDecimalSeparator();
-    const realSeparatorOccurrenceIndex = getRealSeparatorIndex(this.option('format')).occurrence;
+    const formatPattern = this._getFormatPattern();
+    const patternString = isString(formatPattern) ? formatPattern : '';
+    const realSeparatorOccurrenceIndex = getRealSeparatorIndex(patternString).occurrence;
     return getNthOccurrence(text, decimalSeparator, realSeparatorOccurrenceIndex);
   }
 
@@ -336,10 +346,8 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
   }
 
   _parse(text, format) {
-    const formatOption = this.option('format');
-    // @ts-expect-error ts-error
+    const formatOption = this._getEffectiveFormatOption();
     const isCustomParser = isFunction(formatOption.parser);
-    // @ts-expect-error ts-error
     const parser = isCustomParser ? formatOption.parser : number.parse;
     let integerPartStartIndex = 0;
 
@@ -361,8 +369,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
   }
 
   _format(value, format) {
-    const formatOption = this.option('format');
-    // @ts-expect-error ts-error
+    const formatOption = this._getEffectiveFormatOption();
     const customFormatter = formatOption?.formatter || formatOption;
     const formatter = isFunction(customFormatter) ? customFormatter : number.format;
 
@@ -380,11 +387,9 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
   }
 
   _updateFormat(): void {
-    const { format } = this.option();
-    // @ts-expect-error ts-error
+    const format = this._getEffectiveFormatOption();
     const isCustomParser = isFunction(format?.parser);
     const isLDMLPattern = isString(format) && (format.includes('0') || format.includes('#'));
-    // @ts-expect-error ts-error
     const isExponentialFormat = format === 'exponential' || format?.type === 'exponential';
     const shouldUseFormatAsIs = isCustomParser || isLDMLPattern || isExponentialFormat;
 
@@ -568,8 +573,7 @@ class NumberBoxMask extends NumberBoxBase<NumberBoxMaskProperties> {
 
   _useMaskBehavior(): boolean {
     const { useMaskBehavior } = this.option();
-    // @ts-expect-error ts-error
-    return !!this.option('format') && useMaskBehavior;
+    return !!this._getEffectiveFormatOption() && !!useMaskBehavior;
   }
 
   _renderInputType(): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerFilter.tests.js

@@ -17,6 +17,7 @@ import viewPortUtils from 'core/utils/view_port';
 import fx from 'common/core/animation/fx';
 import messageLocalization from 'common/core/localization/message';
 import dateSerialization from 'core/utils/date_serialization';
+import config from 'core/config';
 import { ListSearchBoxWrapper } from '../../helpers/wrappers/searchBoxWrappers.js';
 
 const TREEVIEW_ITEM_CLASS = 'dx-treeview-item';
@@ -2751,6 +2752,73 @@ QUnit.module('Header Filter with real columnsController', {
         assert.deepEqual(items[0].data, { Test2: 'value1' }, 'data of the first item');
     });
 
+    QUnit.test('Blank item text should not be formatted by global numberFormat', function(assert) {
+        // arrange
+        const that = this;
+        const testElement = $('#container');
+        const savedConfig = { ...config() };
+
+        try {
+            config({
+                ...config(),
+                numberFormat: '+#'
+            });
+            that.options.dataSource = [{ Test2: 'value1' }, { Test1: 6, Test2: 'value2' }];
+            that.options.columns[0] = { dataField: 'Test1', dataType: 'number', allowHeaderFiltering: true };
+            that.setupDataGrid();
+            that.columnHeadersView.render(testElement);
+            that.headerFilterView.render(testElement);
+
+            // act
+            that.headerFilterController.showHeaderFilterMenu(0);
+            const $popupContent = that.headerFilterView.getPopupContainer().$content();
+
+            // assert
+            assert.strictEqual($popupContent.find('.dx-list-item').first().text(), '(Blanks)', 'empty text item');
+        } finally {
+            config(savedConfig);
+        }
+    });
+
+    QUnit.test('Filtering by empty string in number column with global numberFormat', function(assert) {
+        // arrange
+        const that = this;
+        let items;
+        const testElement = $('#container');
+        const savedConfig = { ...config() };
+
+        try {
+            config({
+                ...config(),
+                numberFormat: '+#'
+            });
+
+            that.options.dataSource = [{ Test1: '', Test2: 'value1' }, { Test1: 6, Test2: 'value2' }];
+            that.options.columns[0] = { dataField: 'Test1', dataType: 'number', allowHeaderFiltering: true };
+            that.setupDataGrid();
+            that.columnHeadersView.render(testElement);
+            that.headerFilterView.render(testElement);
+
+            // act
+            that.headerFilterController.showHeaderFilterMenu(0);
+            const $popupContent = that.headerFilterView.getPopupContainer().$content();
+
+            // assert
+            assert.strictEqual($popupContent.find('.dx-list-item').first().text(), '(Blanks)', 'empty text item');
+
+            // act
+            $($popupContent.parent().find('.dx-list-item').first()).trigger('dxclick');
+            $($popupContent.parent().find('.dx-button').first()).trigger('dxclick');
+
+            // assert
+            items = that.dataController.items();
+            assert.equal(items.length, 1, 'count items');
+            assert.deepEqual(items[0].data, { Test1: '', Test2: 'value1' }, 'data of the first item');
+        } finally {
+            config(savedConfig);
+        }
+    });
+
     // T372825
     QUnit.test('Filtering by empty string', function(assert) {
         // arrange