diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts index f22389d2aeec..10afedefdaa0 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts +++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts @@ -89,7 +89,7 @@ const getPatternGetter = (patternChar) => { }; export const renderDateParts = (text, regExpInfo) => { - const result = regExpInfo.regexp.exec(text); + const result = regExpInfo.regexp.exec(text) ?? []; let start = 0; let end = 0; diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts index 6dac20a98990..ac995e859f80 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts +++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts @@ -1,6 +1,5 @@ import eventsEngine from '@js/common/core/events/core/events_engine'; import { addNamespace, isCommandKeyPressed, normalizeKeyName } from '@js/common/core/events/utils/index'; -import defaultDateNames from '@js/common/core/localization/default_date_names'; import { getFormat } from '@js/common/core/localization/ldml/date.format'; import { getRegExpInfo } from '@js/common/core/localization/ldml/date.parser'; import numberLocalization from '@js/common/core/localization/number'; @@ -132,8 +131,7 @@ class DateBoxMask extends DateBoxBase { _toggleAmPm(): void { const currentValue = this._getActivePartProp('text'); - // @ts-expect-error ts-error - const indexOfCurrentValue = defaultDateNames.getPeriodNames().indexOf(currentValue); + const indexOfCurrentValue = dateLocalization.getPeriodNames().indexOf(currentValue); const newValue = indexOfCurrentValue ^ 1; this._setActivePartValue(newValue); } @@ -478,7 +476,7 @@ class DateBoxMask extends DateBoxBase { } // @ts-expect-error ts-error let index = fitIntoRange(this._activePartIndex + step, 0, this._dateParts.length - 1); - if (this._dateParts[index].isStub) { + if (this._dateParts[index]?.isStub) { const isBoundaryIndex = index === 0 && step < 0 || index === this._dateParts.length - 1 && step > 0; if (!isBoundaryIndex) { this._selectNextPart(step >= 0 ? step + 1 : step - 1); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js index 5282946e1008..d4fb42188180 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js @@ -7,6 +7,7 @@ import pointerMock from '../../helpers/pointerMock.js'; import 'ui/date_box'; import keyboardMock from '../../helpers/keyboardMock.js'; import devices from '__internal/core/m_devices'; +import localization from 'localization'; const { test, module } = QUnit; @@ -1290,6 +1291,32 @@ module('Date AM/PM Handling', setupModule, () => { assert.strictEqual(this.$input.val(), 'PM'); }); }); + + test('up/down arrows should continue to switch AM/PM on subsequent presses when locale has localized period names (T1327076)', function(assert) { + const defaultLocale = localization.locale(); + + try { + localization.locale('es-ES'); + + const [amName, pmName] = dateLocalization.getPeriodNames(); + + this.instance.option({ + value: new Date('10/10/2012 22:00'), + displayFormat: 'a', + useMaskBehavior: true, + }); + + assert.strictEqual(this.$input.val(), pmName, 'initial value is localized PM'); + + this.keyboard.press('up'); + assert.strictEqual(this.$input.val(), amName, 'value changed to localized AM after first press'); + + this.keyboard.press('up'); + assert.strictEqual(this.$input.val(), pmName, 'value returned to localized PM after second press'); + } finally { + localization.locale(defaultLocale); + } + }); }); module('TimeZone Handling', setupModule, () => {