From 860e0cfdfec50cfa57b019e3071c5253ee054dd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Fri, 20 Mar 2026 17:45:51 +0100 Subject: [PATCH 1/2] Popup: Publish focusLoopEnabled option --- .../autocomplete/nested/drop-down-options.ts | 8 +++++++ .../ui/color-box/nested/drop-down-options.ts | 8 +++++++ .../data-grid/nested/filter-builder-popup.ts | 8 +++++++ .../src/ui/data-grid/nested/popup.ts | 8 +++++++ .../ui/date-box/nested/drop-down-options.ts | 8 +++++++ .../nested/drop-down-options.ts | 8 +++++++ .../drop-down-box/nested/drop-down-options.ts | 8 +++++++ .../nested/drop-down-options.ts | 8 +++++++ .../src/ui/lookup/nested/drop-down-options.ts | 8 +++++++ .../src/ui/nested/base/popup-options.ts | 7 +++++++ .../src/ui/nested/drop-down-options.ts | 1 + .../src/ui/nested/filter-builder-popup.ts | 1 + .../devextreme-angular/src/ui/nested/popup.ts | 1 + .../src/ui/popover/index.ts | 21 +++++++++++++++++++ .../src/ui/popup/component.ts | 21 +++++++++++++++++++ .../ui/select-box/nested/drop-down-options.ts | 8 +++++++ .../ui/tag-box/nested/drop-down-options.ts | 8 +++++++ .../src/ui/tooltip/index.ts | 21 +++++++++++++++++++ .../tree-list/nested/filter-builder-popup.ts | 8 +++++++ .../src/ui/tree-list/nested/popup.ts | 8 +++++++ packages/devextreme-react/src/autocomplete.ts | 1 + packages/devextreme-react/src/color-box.ts | 1 + packages/devextreme-react/src/data-grid.ts | 2 ++ packages/devextreme-react/src/date-box.ts | 1 + .../devextreme-react/src/date-range-box.ts | 1 + .../devextreme-react/src/drop-down-box.ts | 1 + .../devextreme-react/src/drop-down-button.ts | 1 + packages/devextreme-react/src/lookup.ts | 1 + packages/devextreme-react/src/select-box.ts | 1 + packages/devextreme-react/src/tag-box.ts | 1 + packages/devextreme-react/src/tree-list.ts | 2 ++ packages/devextreme-vue/src/autocomplete.ts | 2 ++ packages/devextreme-vue/src/color-box.ts | 2 ++ packages/devextreme-vue/src/data-grid.ts | 4 ++++ packages/devextreme-vue/src/date-box.ts | 2 ++ packages/devextreme-vue/src/date-range-box.ts | 2 ++ packages/devextreme-vue/src/drop-down-box.ts | 2 ++ .../devextreme-vue/src/drop-down-button.ts | 2 ++ packages/devextreme-vue/src/lookup.ts | 2 ++ packages/devextreme-vue/src/popover.ts | 3 +++ packages/devextreme-vue/src/popup.ts | 3 +++ packages/devextreme-vue/src/select-box.ts | 2 ++ packages/devextreme-vue/src/tag-box.ts | 2 ++ packages/devextreme-vue/src/tooltip.ts | 3 +++ packages/devextreme-vue/src/tree-list.ts | 4 ++++ .../column_chooser/m_column_chooser.ts | 2 +- .../header_filter/m_header_filter_core.ts | 2 +- .../column_chooser/column_chooser.tsx | 3 +-- .../m_compact_appointments_helper.ts | 2 +- .../m_desktop_tooltip_strategy.ts | 2 +- .../devextreme/js/__internal/ui/m_lookup.ts | 2 +- .../js/__internal/ui/overlay/overlay.ts | 11 +++++----- .../js/__internal/ui/popover/m_popover.ts | 1 + .../js/__internal/ui/popup/m_popup.ts | 1 + packages/devextreme/js/ui/popup.d.ts | 6 ++++++ .../lookup.tests.js | 6 +++--- .../DevExpress.ui.widgets/overlay.tests.js | 8 +++---- packages/devextreme/ts/dx.all.d.ts | 4 ++++ 58 files changed, 255 insertions(+), 20 deletions(-) diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts index 28a77df9d620..891e216cdd71 100644 --- a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implem this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts index 905154b4a972..2e9ac1d15b8b 100644 --- a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts index 302a86d9cfd6..50c6cb492f63 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts @@ -132,6 +132,14 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts index 70275245e815..9fdeb83e6405 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts @@ -132,6 +132,14 @@ export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts index 947c8dd40195..1cd83896c6d3 100644 --- a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts index 3816595b5463..eafbf3b0c230 100644 --- a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implem this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts index ae02021ae604..dc1687b85989 100644 --- a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption impleme this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts index 3670a9e5f83c..8e60b4565969 100644 --- a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption impl this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts index 442e222d44b6..72c606c3f1a6 100644 --- a/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts @@ -97,6 +97,14 @@ export class DxoLookupDropDownOptionsComponent extends NestedOption implements O this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get height(): number | string { return this._getOption('height'); diff --git a/packages/devextreme-angular/src/ui/nested/base/popup-options.ts b/packages/devextreme-angular/src/ui/nested/base/popup-options.ts index bc31c24c8ad2..54336fae3b59 100644 --- a/packages/devextreme-angular/src/ui/nested/base/popup-options.ts +++ b/packages/devextreme-angular/src/ui/nested/base/popup-options.ts @@ -85,6 +85,13 @@ export abstract class DxoPopupOptions extends NestedOption { this._setOption('enableBodyScroll', value); } + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); } diff --git a/packages/devextreme-angular/src/ui/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/nested/drop-down-options.ts index f7e64f96af5b..51a61544a7b4 100644 --- a/packages/devextreme-angular/src/ui/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/nested/drop-down-options.ts @@ -50,6 +50,7 @@ import { 'dragEnabled', 'dragOutsideBoundary', 'enableBodyScroll', + 'focusLoopEnabled', 'focusStateEnabled', 'fullScreen', 'height', diff --git a/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts index 90edc01fdbfe..b1de42f9e752 100644 --- a/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts +++ b/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts @@ -50,6 +50,7 @@ import { 'dragEnabled', 'dragOutsideBoundary', 'enableBodyScroll', + 'focusLoopEnabled', 'focusStateEnabled', 'fullScreen', 'height', diff --git a/packages/devextreme-angular/src/ui/nested/popup.ts b/packages/devextreme-angular/src/ui/nested/popup.ts index 6b75a8d5f380..89e074c66a67 100644 --- a/packages/devextreme-angular/src/ui/nested/popup.ts +++ b/packages/devextreme-angular/src/ui/nested/popup.ts @@ -50,6 +50,7 @@ import { 'dragEnabled', 'dragOutsideBoundary', 'enableBodyScroll', + 'focusLoopEnabled', 'focusStateEnabled', 'fullScreen', 'height', diff --git a/packages/devextreme-angular/src/ui/popover/index.ts b/packages/devextreme-angular/src/ui/popover/index.ts index 54e628b53e4c..48f913a41502 100644 --- a/packages/devextreme-angular/src/ui/popover/index.ts +++ b/packages/devextreme-angular/src/ui/popover/index.ts @@ -179,6 +179,19 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan } + /** + * [descr:dxPopupOptions.focusLoopEnabled] + + */ + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + + /** * [descr:dxPopoverOptions.height] @@ -604,6 +617,13 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan */ @Output() enableBodyScrollChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() focusLoopEnabledChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -800,6 +820,7 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan { emit: 'deferRenderingChange' }, { emit: 'disabledChange' }, { emit: 'enableBodyScrollChange' }, + { emit: 'focusLoopEnabledChange' }, { emit: 'heightChange' }, { emit: 'hideEventChange' }, { emit: 'hideOnOutsideClickChange' }, diff --git a/packages/devextreme-angular/src/ui/popup/component.ts b/packages/devextreme-angular/src/ui/popup/component.ts index 931a174c30c9..b476d79d9a0c 100644 --- a/packages/devextreme-angular/src/ui/popup/component.ts +++ b/packages/devextreme-angular/src/ui/popup/component.ts @@ -227,6 +227,19 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange } + /** + * [descr:dxPopupOptions.focusLoopEnabled] + + */ + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + + /** * [descr:dxPopupOptions.focusStateEnabled] @@ -730,6 +743,13 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange */ @Output() enableBodyScrollChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() focusLoopEnabledChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -947,6 +967,7 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange { emit: 'dragEnabledChange' }, { emit: 'dragOutsideBoundaryChange' }, { emit: 'enableBodyScrollChange' }, + { emit: 'focusLoopEnabledChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'fullScreenChange' }, { emit: 'heightChange' }, diff --git a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts index f5cdeef93cb5..f402b8ac261a 100644 --- a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implement this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts index e5bf5e7d3194..bcae5f7f4954 100644 --- a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts @@ -132,6 +132,14 @@ export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements O this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/tooltip/index.ts b/packages/devextreme-angular/src/ui/tooltip/index.ts index 083e3d6d9a08..86e48dce4a16 100644 --- a/packages/devextreme-angular/src/ui/tooltip/index.ts +++ b/packages/devextreme-angular/src/ui/tooltip/index.ts @@ -148,6 +148,19 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { } + /** + * [descr:dxPopupOptions.focusLoopEnabled] + + */ + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + + /** * [descr:dxPopoverOptions.height] @@ -493,6 +506,13 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { */ @Output() disabledChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() focusLoopEnabledChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -651,6 +671,7 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { { emit: 'contentTemplateChange' }, { emit: 'deferRenderingChange' }, { emit: 'disabledChange' }, + { emit: 'focusLoopEnabledChange' }, { emit: 'heightChange' }, { emit: 'hideEventChange' }, { emit: 'hideOnOutsideClickChange' }, diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts index f2b46708f424..936109ac12e9 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts @@ -132,6 +132,14 @@ export class DxoTreeListFilterBuilderPopupComponent extends NestedOption impleme this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts index 0e530dc2896d..6c9d2e7fa524 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts @@ -132,6 +132,14 @@ export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy this._setOption('enableBodyScroll', value); } + @Input() + get focusLoopEnabled(): boolean { + return this._getOption('focusLoopEnabled'); + } + set focusLoopEnabled(value: boolean) { + this._setOption('focusLoopEnabled', value); + } + @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); diff --git a/packages/devextreme-react/src/autocomplete.ts b/packages/devextreme-react/src/autocomplete.ts index 47e2f7e49c26..58847b6d8352 100644 --- a/packages/devextreme-react/src/autocomplete.ts +++ b/packages/devextreme-react/src/autocomplete.ts @@ -246,6 +246,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/color-box.ts b/packages/devextreme-react/src/color-box.ts index 1063c5c9b59b..e0dcebf97566 100644 --- a/packages/devextreme-react/src/color-box.ts +++ b/packages/devextreme-react/src/color-box.ts @@ -237,6 +237,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index f1773138c4c5..3e8ce77f0bc8 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -1640,6 +1640,7 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -2832,6 +2833,7 @@ type IPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/date-box.ts b/packages/devextreme-react/src/date-box.ts index 3ba0d33fd256..2634db701e33 100644 --- a/packages/devextreme-react/src/date-box.ts +++ b/packages/devextreme-react/src/date-box.ts @@ -330,6 +330,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/date-range-box.ts b/packages/devextreme-react/src/date-range-box.ts index aed0ca125d1d..038d42c4b559 100644 --- a/packages/devextreme-react/src/date-range-box.ts +++ b/packages/devextreme-react/src/date-range-box.ts @@ -335,6 +335,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/drop-down-box.ts b/packages/devextreme-react/src/drop-down-box.ts index ce01022a167d..71eec64f3ae8 100644 --- a/packages/devextreme-react/src/drop-down-box.ts +++ b/packages/devextreme-react/src/drop-down-box.ts @@ -241,6 +241,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/drop-down-button.ts b/packages/devextreme-react/src/drop-down-button.ts index 2c06e7766b52..b1b9715f635c 100644 --- a/packages/devextreme-react/src/drop-down-button.ts +++ b/packages/devextreme-react/src/drop-down-button.ts @@ -196,6 +196,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/lookup.ts b/packages/devextreme-react/src/lookup.ts index 25bb3d4c4066..323e92733058 100644 --- a/packages/devextreme-react/src/lookup.ts +++ b/packages/devextreme-react/src/lookup.ts @@ -204,6 +204,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ deferRendering?: boolean; disabled?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; height?: number | string; hideEvent?: Record | string | undefined | { delay?: number | undefined; diff --git a/packages/devextreme-react/src/select-box.ts b/packages/devextreme-react/src/select-box.ts index bff5f49f379e..0e34281670a0 100644 --- a/packages/devextreme-react/src/select-box.ts +++ b/packages/devextreme-react/src/select-box.ts @@ -255,6 +255,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/tag-box.ts b/packages/devextreme-react/src/tag-box.ts index b58a368edac7..c472a95097c4 100644 --- a/packages/devextreme-react/src/tag-box.ts +++ b/packages/devextreme-react/src/tag-box.ts @@ -261,6 +261,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index 6460444aa3e5..9a26111a565a 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -1409,6 +1409,7 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -2464,6 +2465,7 @@ type IPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; + focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; diff --git a/packages/devextreme-vue/src/autocomplete.ts b/packages/devextreme-vue/src/autocomplete.ts index dade5b9a8a43..dbc1d163afa9 100644 --- a/packages/devextreme-vue/src/autocomplete.ts +++ b/packages/devextreme-vue/src/autocomplete.ts @@ -468,6 +468,7 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -518,6 +519,7 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/color-box.ts b/packages/devextreme-vue/src/color-box.ts index ef1bc37b131a..b5daadbd68cb 100644 --- a/packages/devextreme-vue/src/color-box.ts +++ b/packages/devextreme-vue/src/color-box.ts @@ -417,6 +417,7 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -467,6 +468,7 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 909b4effa915..6d02d72dd74c 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -2230,6 +2230,7 @@ const DxFilterBuilderPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -2280,6 +2281,7 @@ const DxFilterBuilderPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -3497,6 +3499,7 @@ const DxPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -3547,6 +3550,7 @@ const DxPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/date-box.ts b/packages/devextreme-vue/src/date-box.ts index a5957c5a99eb..680c1cde13da 100644 --- a/packages/devextreme-vue/src/date-box.ts +++ b/packages/devextreme-vue/src/date-box.ts @@ -606,6 +606,7 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -656,6 +657,7 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/date-range-box.ts b/packages/devextreme-vue/src/date-range-box.ts index ff5f88b085c1..89812c26a106 100644 --- a/packages/devextreme-vue/src/date-range-box.ts +++ b/packages/devextreme-vue/src/date-range-box.ts @@ -615,6 +615,7 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -665,6 +666,7 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/drop-down-box.ts b/packages/devextreme-vue/src/drop-down-box.ts index 9fcc93346eb6..b7ac00825c5c 100644 --- a/packages/devextreme-vue/src/drop-down-box.ts +++ b/packages/devextreme-vue/src/drop-down-box.ts @@ -432,6 +432,7 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -482,6 +483,7 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/drop-down-button.ts b/packages/devextreme-vue/src/drop-down-button.ts index 86f556f124c6..3dd25c126312 100644 --- a/packages/devextreme-vue/src/drop-down-button.ts +++ b/packages/devextreme-vue/src/drop-down-button.ts @@ -311,6 +311,7 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -361,6 +362,7 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme-vue/src/lookup.ts b/packages/devextreme-vue/src/lookup.ts index 2c98c0120be3..64788d5f4fef 100644 --- a/packages/devextreme-vue/src/lookup.ts +++ b/packages/devextreme-vue/src/lookup.ts @@ -444,6 +444,7 @@ const DxDropDownOptionsConfig = { "update:deferRendering": null, "update:disabled": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:height": null, "update:hideEvent": null, "update:hideOnOutsideClick": null, @@ -485,6 +486,7 @@ const DxDropDownOptionsConfig = { deferRendering: Boolean, disabled: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, height: [Number, String], hideEvent: [Object, String] as PropType | string>, hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, diff --git a/packages/devextreme-vue/src/popover.ts b/packages/devextreme-vue/src/popover.ts index cd9c13bcfbbf..3ad16c73d8b1 100644 --- a/packages/devextreme-vue/src/popover.ts +++ b/packages/devextreme-vue/src/popover.ts @@ -50,6 +50,7 @@ type AccessibleOptions = Pick | string>, hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, @@ -140,6 +142,7 @@ const componentConfig = { "update:deferRendering": null, "update:disabled": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:height": null, "update:hideEvent": null, "update:hideOnOutsideClick": null, diff --git a/packages/devextreme-vue/src/popup.ts b/packages/devextreme-vue/src/popup.ts index 53be772451bd..df569f6987db 100644 --- a/packages/devextreme-vue/src/popup.ts +++ b/packages/devextreme-vue/src/popup.ts @@ -51,6 +51,7 @@ type AccessibleOptions = Pick | string>, hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, @@ -114,6 +116,7 @@ const componentConfig = { "update:contentTemplate": null, "update:deferRendering": null, "update:disabled": null, + "update:focusLoopEnabled": null, "update:height": null, "update:hideEvent": null, "update:hideOnOutsideClick": null, diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index c684080c56d6..1cd588f32a13 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -2007,6 +2007,7 @@ const DxFilterBuilderPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -2057,6 +2058,7 @@ const DxFilterBuilderPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -3139,6 +3141,7 @@ const DxPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, + "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -3189,6 +3192,7 @@ const DxPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, + focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts index f12a6a54cf19..f039a5956c0c 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts @@ -173,7 +173,7 @@ export class ColumnChooserView extends ColumnsView { height: columnChooserOptions.height, rtlEnabled: that.option('rtlEnabled'), container: columnChooserOptions.container, - _loopFocus: true, + focusLoopEnabled: true, _ignoreCloseOnChildEscape: true, } as PopupProperties; diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts index f094cd25c59a..0e798bdab60a 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts @@ -330,7 +330,7 @@ export class HeaderFilterView extends Modules.View { // T321243 component.option('animation', component._getDefaultOptions().animation); }, - _loopFocus: true, + focusLoopEnabled: true, }; if (!isDefined(that._popupContainer)) { diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx index 00fda99333a4..7d3b86d3bcb1 100644 --- a/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx +++ b/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx @@ -87,8 +87,7 @@ export class ColumnChooser extends Component { dragEnabled={true} resizeEnabled={true} showCloseButton={true} - // @ts-expect-error - _loopFocus={true} + focusLoopEnabled={true} toolbarItems={toolbarItems} wrapperAttr={{ class: this.getPopupWrapperClass() }} diff --git a/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts b/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts index 4214cf6750ec..f0aeb6568dec 100644 --- a/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts +++ b/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts @@ -59,7 +59,7 @@ export class CompactAppointmentsHelper { clickEvent: this._clickEvent(options.onAppointmentClick).bind(this), dragBehavior: options.allowDrag && this._createTooltipDragBehavior($appointmentCollector).bind(this), isButtonClick: true, - _loopFocus: true, + focusLoopEnabled: true, }; } diff --git a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts index 986748d6a455..4266c5e9885f 100644 --- a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts +++ b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts @@ -50,7 +50,7 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase { onShown: this.onShown.bind(this), contentTemplate: this.getContentTemplate(dataList), wrapperAttr: { class: APPOINTMENT_TOOLTIP_WRAPPER_CLASS }, - _loopFocus: this.extraOptions._loopFocus, + focusLoopEnabled: this.extraOptions.focusLoopEnabled, }); tooltip.setAria({ diff --git a/packages/devextreme/js/__internal/ui/m_lookup.ts b/packages/devextreme/js/__internal/ui/m_lookup.ts index 2c78a4e9af79..e7e9bf5466d5 100644 --- a/packages/devextreme/js/__internal/ui/m_lookup.ts +++ b/packages/devextreme/js/__internal/ui/m_lookup.ts @@ -710,7 +710,7 @@ class Lookup extends DropDownList { shading: dropDownOptions.shading, // @ts-expect-error ts-error hideOnOutsideClick: dropDownOptions.hideOnOutsideClick, - _loopFocus: shouldLoopFocusInsidePopup, + focusLoopEnabled: shouldLoopFocusInsidePopup, }); delete result.animation; diff --git a/packages/devextreme/js/__internal/ui/overlay/overlay.ts b/packages/devextreme/js/__internal/ui/overlay/overlay.ts index d03c6c326ed4..36f13e456e22 100644 --- a/packages/devextreme/js/__internal/ui/overlay/overlay.ts +++ b/packages/devextreme/js/__internal/ui/overlay/overlay.ts @@ -120,7 +120,7 @@ export interface OverlayProperties extends Properties { zIndex?: number; - _loopFocus?: boolean; + focusLoopEnabled?: boolean; _ignorePreventScrollEventsDeprecation?: boolean; @@ -294,7 +294,7 @@ class Overlay< ignoreChildEvents: true, _checkParentVisibility: true, _fixWrapperPosition: false, - _loopFocus: false, + focusLoopEnabled: false, _ignorePreventScrollEventsDeprecation: false, // NOTE: private option hideTopOverlayHandler: (): void => { @@ -939,12 +939,11 @@ class Overlay< } _toggleTabTerminator(enabled: boolean): void { - // eslint-disable-next-line @typescript-eslint/naming-convention - const { _loopFocus } = this.option(); + const { focusLoopEnabled } = this.option(); // @ts-expect-error NAME has string | undefined type const eventName = addNamespace('keydown', this.NAME); - if (_loopFocus || enabled) { + if (focusLoopEnabled || enabled) { eventsEngine.on(domAdapter.getDocument(), eventName, this._proxiedTabTerminatorHandler); } else { this._destroyTabTerminator(); @@ -1527,7 +1526,7 @@ class Overlay< switch (name) { case 'animation': break; - case '_loopFocus': + case 'focusLoopEnabled': case 'shading': { this._toggleShading(this._isVisible()); this._toggleSafariScrolling(); diff --git a/packages/devextreme/js/__internal/ui/popover/m_popover.ts b/packages/devextreme/js/__internal/ui/popover/m_popover.ts index 908801798f29..8d47110907dd 100644 --- a/packages/devextreme/js/__internal/ui/popover/m_popover.ts +++ b/packages/devextreme/js/__internal/ui/popover/m_popover.ts @@ -191,6 +191,7 @@ class Popover< _initEscapeKeyHandler(): void { this._documentEscapeKeyHandler = (e: KeyboardEvent): void => { const { visible } = this.option(); + const overlayStack = this._overlayStack(); const isTopOverlay = overlayStack[overlayStack.length - 1] === this; diff --git a/packages/devextreme/js/__internal/ui/popup/m_popup.ts b/packages/devextreme/js/__internal/ui/popup/m_popup.ts index fac819c15fa2..741778d0ace0 100644 --- a/packages/devextreme/js/__internal/ui/popup/m_popup.ts +++ b/packages/devextreme/js/__internal/ui/popup/m_popup.ts @@ -267,6 +267,7 @@ class Popup< useDefaultToolbarButtons: false, useFlatToolbarButtons: false, autoResizeEnabled: true, + focusLoopEnabled: false, _ignoreCloseOnChildEscape: false, }; } diff --git a/packages/devextreme/js/ui/popup.d.ts b/packages/devextreme/js/ui/popup.d.ts index c7f6507a4cc3..47d9288d74c1 100644 --- a/packages/devextreme/js/ui/popup.d.ts +++ b/packages/devextreme/js/ui/popup.d.ts @@ -126,6 +126,12 @@ export interface dxPopupOptions extends dxOverlayOptions * @public */ dragOutsideBoundary?: boolean; + /** + * @docid + * @default false + * @public + */ + focusLoopEnabled?: boolean; /** * @docid * @default true &for(desktop) diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js index 1f29b862072f..bd5e2ba37042 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js @@ -2192,7 +2192,7 @@ QUnit.module('popup options', { [true, false].forEach(dropDownCentered => { [true, false].forEach(_scrollToSelectedItemEnabled => { [true, false].forEach(usePopover => { - QUnit.test(`Popup should have correct _loopFocus option value if usePopover=${usePopover}, _scrollToSelectedItemEnabled=${_scrollToSelectedItemEnabled}, dropDownCentered=${dropDownCentered}`, function(assert) { + QUnit.test(`Popup should have correct focusLoopEnabled option value if usePopover=${usePopover}, _scrollToSelectedItemEnabled=${_scrollToSelectedItemEnabled}, dropDownCentered=${dropDownCentered}`, function(assert) { const instance = $('#lookupOptions').dxLookup({ _scrollToSelectedItemEnabled, usePopover, @@ -2211,9 +2211,9 @@ QUnit.module('popup options', { ? dropDownCentered : !usePopover; - const { _loopFocus } = popup.option(); + const { focusLoopEnabled } = popup.option(); - assert.strictEqual(_loopFocus, expectedValue, `_loopFocus: ${_loopFocus} is correct`); + assert.strictEqual(focusLoopEnabled, expectedValue, `focusLoopEnabled: ${focusLoopEnabled} is correct`); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js index 0ba3be0092a0..6c6825ed8803 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js @@ -3278,11 +3278,11 @@ testModule('focus policy', { assert.strictEqual(getActiveElement(), $firstTabbable.get(0), 'first item focused on press tab on last item (does not go under overlay)'); }); - test('focus in Overlay should be looped if _loopFocus: true and shading: false', function(assert) { + test('focus in Overlay should be looped if focusLoopEnabled: true and shading: false', function(assert) { const overlay = new Overlay($('
').appendTo('#qunit-fixture'), { visible: true, shading: false, - _loopFocus: true, + focusLoopEnabled: true, contentTemplate: $('#focusableTemplate') }); const $content = overlay.$content(); @@ -3300,7 +3300,7 @@ testModule('focus policy', { assert.strictEqual(getActiveElement(), lastFocusableElement, 'last item is focused'); }); - test('focus in Overlay should be looped if shading: false, _loopFocus gets true in runtime', function(assert) { + test('focus in Overlay should be looped if shading: false, focusLoopEnabled gets true in runtime', function(assert) { const overlay = new Overlay($('
').appendTo('#qunit-fixture'), { visible: true, shading: false, @@ -3321,7 +3321,7 @@ testModule('focus policy', { assert.strictEqual(getActiveElement() !== lastFocusableElement, true, 'last item is not focused'); - overlay.option('_loopFocus', true); + overlay.option('focusLoopEnabled', true); $(lastFocusableElement).focus(); $(lastFocusableElement).trigger(this.tabEvent); diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 30d20a7ee466..72dd12ffcefd 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -25195,6 +25195,10 @@ declare module DevExpress.ui { * [descr:dxPopupOptions.dragOutsideBoundary] */ dragOutsideBoundary?: boolean; + /** + * [descr:dxPopupOptions.focusLoopEnabled] + */ + focusLoopEnabled?: boolean; /** * [descr:dxPopupOptions.focusStateEnabled] */ From d363aadb074f518494e2a75c48dea01ee8db31f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Mon, 23 Mar 2026 11:29:16 +0100 Subject: [PATCH 2/2] refactor(name): Rename tabFocusLoopEnabled --- .../autocomplete/nested/drop-down-options.ts | 16 +++---- .../ui/color-box/nested/drop-down-options.ts | 16 +++---- .../data-grid/nested/filter-builder-popup.ts | 16 +++---- .../src/ui/data-grid/nested/popup.ts | 16 +++---- .../ui/date-box/nested/drop-down-options.ts | 16 +++---- .../nested/drop-down-options.ts | 16 +++---- .../drop-down-box/nested/drop-down-options.ts | 16 +++---- .../nested/drop-down-options.ts | 16 +++---- .../src/ui/lookup/nested/drop-down-options.ts | 16 +++---- .../src/ui/nested/base/popup-options.ts | 14 +++---- .../src/ui/nested/drop-down-options.ts | 2 +- .../src/ui/nested/filter-builder-popup.ts | 2 +- .../devextreme-angular/src/ui/nested/popup.ts | 2 +- .../src/ui/popover/index.ts | 42 +++++++++---------- .../src/ui/popup/component.ts | 42 +++++++++---------- .../ui/select-box/nested/drop-down-options.ts | 16 +++---- .../ui/tag-box/nested/drop-down-options.ts | 16 +++---- .../src/ui/tooltip/index.ts | 42 +++++++++---------- .../tree-list/nested/filter-builder-popup.ts | 16 +++---- .../src/ui/tree-list/nested/popup.ts | 16 +++---- packages/devextreme-react/src/autocomplete.ts | 2 +- packages/devextreme-react/src/color-box.ts | 2 +- packages/devextreme-react/src/data-grid.ts | 4 +- packages/devextreme-react/src/date-box.ts | 2 +- .../devextreme-react/src/date-range-box.ts | 2 +- .../devextreme-react/src/drop-down-box.ts | 2 +- .../devextreme-react/src/drop-down-button.ts | 2 +- packages/devextreme-react/src/lookup.ts | 2 +- packages/devextreme-react/src/select-box.ts | 2 +- packages/devextreme-react/src/tag-box.ts | 2 +- packages/devextreme-react/src/tree-list.ts | 4 +- packages/devextreme-vue/src/autocomplete.ts | 4 +- packages/devextreme-vue/src/color-box.ts | 4 +- packages/devextreme-vue/src/data-grid.ts | 8 ++-- packages/devextreme-vue/src/date-box.ts | 4 +- packages/devextreme-vue/src/date-range-box.ts | 4 +- packages/devextreme-vue/src/drop-down-box.ts | 4 +- .../devextreme-vue/src/drop-down-button.ts | 4 +- packages/devextreme-vue/src/lookup.ts | 4 +- packages/devextreme-vue/src/popover.ts | 6 +-- packages/devextreme-vue/src/popup.ts | 6 +-- packages/devextreme-vue/src/select-box.ts | 4 +- packages/devextreme-vue/src/tag-box.ts | 4 +- packages/devextreme-vue/src/tooltip.ts | 6 +-- packages/devextreme-vue/src/tree-list.ts | 8 ++-- .../column_chooser/m_column_chooser.ts | 2 +- .../header_filter/m_header_filter_core.ts | 2 +- .../column_chooser/column_chooser.tsx | 2 +- .../m_compact_appointments_helper.ts | 2 +- .../m_desktop_tooltip_strategy.ts | 2 +- .../devextreme/js/__internal/ui/m_lookup.ts | 2 +- .../js/__internal/ui/overlay/overlay.ts | 10 ++--- .../js/__internal/ui/popup/m_popup.ts | 2 +- packages/devextreme/js/ui/popup.d.ts | 12 +++--- .../lookup.tests.js | 6 +-- .../DevExpress.ui.widgets/overlay.tests.js | 8 ++-- packages/devextreme/ts/dx.all.d.ts | 8 ++-- 57 files changed, 254 insertions(+), 254 deletions(-) diff --git a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts index 891e216cdd71..e9e83d1e1dcf 100644 --- a/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/autocomplete/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implem this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoAutocompleteDropDownOptionsComponent extends NestedOption implem this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts index 2e9ac1d15b8b..1885727cc9b0 100644 --- a/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/color-box/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoColorBoxDropDownOptionsComponent extends NestedOption implements this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts index 50c6cb492f63..78d66d56c404 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/filter-builder-popup.ts @@ -132,14 +132,6 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoDataGridFilterBuilderPopupComponent extends NestedOption impleme this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts index 9fdeb83e6405..7901866b23f2 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/popup.ts @@ -132,14 +132,6 @@ export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoDataGridPopupComponent extends NestedOption implements OnDestroy this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts index 1cd83896c6d3..d8c4e05243ea 100644 --- a/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/date-box/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoDateBoxDropDownOptionsComponent extends NestedOption implements this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts index eafbf3b0c230..4ff8a44ba5ef 100644 --- a/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/date-range-box/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implem this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoDateRangeBoxDropDownOptionsComponent extends NestedOption implem this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts index dc1687b85989..5aadb85fd119 100644 --- a/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/drop-down-box/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption impleme this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoDropDownBoxDropDownOptionsComponent extends NestedOption impleme this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts index 8e60b4565969..99956b235182 100644 --- a/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/drop-down-button/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption impl this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoDropDownButtonDropDownOptionsComponent extends NestedOption impl this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts index 72c606c3f1a6..2ef25123442e 100644 --- a/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/lookup/nested/drop-down-options.ts @@ -97,14 +97,6 @@ export class DxoLookupDropDownOptionsComponent extends NestedOption implements O this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get height(): number | string { return this._getOption('height'); @@ -313,6 +305,14 @@ export class DxoLookupDropDownOptionsComponent extends NestedOption implements O this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get target(): any | string | undefined { return this._getOption('target'); diff --git a/packages/devextreme-angular/src/ui/nested/base/popup-options.ts b/packages/devextreme-angular/src/ui/nested/base/popup-options.ts index 54336fae3b59..b779e987954c 100644 --- a/packages/devextreme-angular/src/ui/nested/base/popup-options.ts +++ b/packages/devextreme-angular/src/ui/nested/base/popup-options.ts @@ -85,13 +85,6 @@ export abstract class DxoPopupOptions extends NestedOption { this._setOption('enableBodyScroll', value); } - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); } @@ -309,6 +302,13 @@ export abstract class DxoPopupOptions extends NestedOption { this._setOption('showTitle', value); } + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + get tabIndex(): number { return this._getOption('tabIndex'); } diff --git a/packages/devextreme-angular/src/ui/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/nested/drop-down-options.ts index 51a61544a7b4..703f02fdbe06 100644 --- a/packages/devextreme-angular/src/ui/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/nested/drop-down-options.ts @@ -50,7 +50,6 @@ import { 'dragEnabled', 'dragOutsideBoundary', 'enableBodyScroll', - 'focusLoopEnabled', 'focusStateEnabled', 'fullScreen', 'height', @@ -82,6 +81,7 @@ import { 'shadingColor', 'showCloseButton', 'showTitle', + 'tabFocusLoopEnabled', 'tabIndex', 'title', 'titleTemplate', diff --git a/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts index b1de42f9e752..0313fcf42055 100644 --- a/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts +++ b/packages/devextreme-angular/src/ui/nested/filter-builder-popup.ts @@ -50,7 +50,6 @@ import { 'dragEnabled', 'dragOutsideBoundary', 'enableBodyScroll', - 'focusLoopEnabled', 'focusStateEnabled', 'fullScreen', 'height', @@ -82,6 +81,7 @@ import { 'shadingColor', 'showCloseButton', 'showTitle', + 'tabFocusLoopEnabled', 'tabIndex', 'title', 'titleTemplate', diff --git a/packages/devextreme-angular/src/ui/nested/popup.ts b/packages/devextreme-angular/src/ui/nested/popup.ts index 89e074c66a67..efaf160ceba6 100644 --- a/packages/devextreme-angular/src/ui/nested/popup.ts +++ b/packages/devextreme-angular/src/ui/nested/popup.ts @@ -50,7 +50,6 @@ import { 'dragEnabled', 'dragOutsideBoundary', 'enableBodyScroll', - 'focusLoopEnabled', 'focusStateEnabled', 'fullScreen', 'height', @@ -82,6 +81,7 @@ import { 'shadingColor', 'showCloseButton', 'showTitle', + 'tabFocusLoopEnabled', 'tabIndex', 'title', 'titleTemplate', diff --git a/packages/devextreme-angular/src/ui/popover/index.ts b/packages/devextreme-angular/src/ui/popover/index.ts index 48f913a41502..8b17fc05f9a6 100644 --- a/packages/devextreme-angular/src/ui/popover/index.ts +++ b/packages/devextreme-angular/src/ui/popover/index.ts @@ -179,19 +179,6 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan } - /** - * [descr:dxPopupOptions.focusLoopEnabled] - - */ - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - - /** * [descr:dxPopoverOptions.height] @@ -413,6 +400,19 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan } + /** + * [descr:dxPopupOptions.tabFocusLoopEnabled] + + */ + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + + /** * [descr:dxPopoverOptions.target] @@ -617,13 +617,6 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan */ @Output() enableBodyScrollChange: EventEmitter; - /** - - * This member supports the internal infrastructure and is not intended to be used directly from your code. - - */ - @Output() focusLoopEnabledChange: EventEmitter; - /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -743,6 +736,13 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan */ @Output() showTitleChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() tabFocusLoopEnabledChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -820,7 +820,6 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan { emit: 'deferRenderingChange' }, { emit: 'disabledChange' }, { emit: 'enableBodyScrollChange' }, - { emit: 'focusLoopEnabledChange' }, { emit: 'heightChange' }, { emit: 'hideEventChange' }, { emit: 'hideOnOutsideClickChange' }, @@ -838,6 +837,7 @@ export class DxPopoverComponent extends DxComponent implements OnDestroy, OnChan { emit: 'showCloseButtonChange' }, { emit: 'showEventChange' }, { emit: 'showTitleChange' }, + { emit: 'tabFocusLoopEnabledChange' }, { emit: 'targetChange' }, { emit: 'titleChange' }, { emit: 'titleTemplateChange' }, diff --git a/packages/devextreme-angular/src/ui/popup/component.ts b/packages/devextreme-angular/src/ui/popup/component.ts index b476d79d9a0c..9e4716d61edd 100644 --- a/packages/devextreme-angular/src/ui/popup/component.ts +++ b/packages/devextreme-angular/src/ui/popup/component.ts @@ -227,19 +227,6 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange } - /** - * [descr:dxPopupOptions.focusLoopEnabled] - - */ - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - - /** * [descr:dxPopupOptions.focusStateEnabled] @@ -487,6 +474,19 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange } + /** + * [descr:dxPopupOptions.tabFocusLoopEnabled] + + */ + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + + /** * [descr:WidgetOptions.tabIndex] @@ -743,13 +743,6 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange */ @Output() enableBodyScrollChange: EventEmitter; - /** - - * This member supports the internal infrastructure and is not intended to be used directly from your code. - - */ - @Output() focusLoopEnabledChange: EventEmitter; - /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -883,6 +876,13 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange */ @Output() showTitleChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() tabFocusLoopEnabledChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -967,7 +967,6 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange { emit: 'dragEnabledChange' }, { emit: 'dragOutsideBoundaryChange' }, { emit: 'enableBodyScrollChange' }, - { emit: 'focusLoopEnabledChange' }, { emit: 'focusStateEnabledChange' }, { emit: 'fullScreenChange' }, { emit: 'heightChange' }, @@ -987,6 +986,7 @@ export class DxPopupComponent extends DxComponent implements OnDestroy, OnChange { emit: 'shadingColorChange' }, { emit: 'showCloseButtonChange' }, { emit: 'showTitleChange' }, + { emit: 'tabFocusLoopEnabledChange' }, { emit: 'tabIndexChange' }, { emit: 'titleChange' }, { emit: 'titleTemplateChange' }, diff --git a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts index f402b8ac261a..5553aded1ed2 100644 --- a/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/select-box/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implement this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoSelectBoxDropDownOptionsComponent extends NestedOption implement this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts index bcae5f7f4954..ec598e260145 100644 --- a/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts +++ b/packages/devextreme-angular/src/ui/tag-box/nested/drop-down-options.ts @@ -132,14 +132,6 @@ export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements O this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoTagBoxDropDownOptionsComponent extends NestedOption implements O this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/tooltip/index.ts b/packages/devextreme-angular/src/ui/tooltip/index.ts index 86e48dce4a16..02d76793b9b8 100644 --- a/packages/devextreme-angular/src/ui/tooltip/index.ts +++ b/packages/devextreme-angular/src/ui/tooltip/index.ts @@ -148,19 +148,6 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { } - /** - * [descr:dxPopupOptions.focusLoopEnabled] - - */ - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - - /** * [descr:dxPopoverOptions.height] @@ -356,6 +343,19 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { } + /** + * [descr:dxPopupOptions.tabFocusLoopEnabled] + + */ + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + + /** * [descr:dxPopoverOptions.target] @@ -506,13 +506,6 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { */ @Output() disabledChange: EventEmitter; - /** - - * This member supports the internal infrastructure and is not intended to be used directly from your code. - - */ - @Output() focusLoopEnabledChange: EventEmitter; - /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -618,6 +611,13 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { */ @Output() showEventChange: EventEmitter; + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() tabFocusLoopEnabledChange: EventEmitter; + /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -671,7 +671,6 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { { emit: 'contentTemplateChange' }, { emit: 'deferRenderingChange' }, { emit: 'disabledChange' }, - { emit: 'focusLoopEnabledChange' }, { emit: 'heightChange' }, { emit: 'hideEventChange' }, { emit: 'hideOnOutsideClickChange' }, @@ -687,6 +686,7 @@ export class DxTooltipComponent extends DxComponent implements OnDestroy { { emit: 'shadingChange' }, { emit: 'shadingColorChange' }, { emit: 'showEventChange' }, + { emit: 'tabFocusLoopEnabledChange' }, { emit: 'targetChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' }, diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts index 936109ac12e9..86cb8981b104 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/filter-builder-popup.ts @@ -132,14 +132,6 @@ export class DxoTreeListFilterBuilderPopupComponent extends NestedOption impleme this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoTreeListFilterBuilderPopupComponent extends NestedOption impleme this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts index 6c9d2e7fa524..e00e8865f955 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/popup.ts @@ -132,14 +132,6 @@ export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy this._setOption('enableBodyScroll', value); } - @Input() - get focusLoopEnabled(): boolean { - return this._getOption('focusLoopEnabled'); - } - set focusLoopEnabled(value: boolean) { - this._setOption('focusLoopEnabled', value); - } - @Input() get focusStateEnabled(): boolean { return this._getOption('focusStateEnabled'); @@ -388,6 +380,14 @@ export class DxoTreeListPopupComponent extends NestedOption implements OnDestroy this._setOption('showTitle', value); } + @Input() + get tabFocusLoopEnabled(): boolean { + return this._getOption('tabFocusLoopEnabled'); + } + set tabFocusLoopEnabled(value: boolean) { + this._setOption('tabFocusLoopEnabled', value); + } + @Input() get tabIndex(): number { return this._getOption('tabIndex'); diff --git a/packages/devextreme-react/src/autocomplete.ts b/packages/devextreme-react/src/autocomplete.ts index 58847b6d8352..429e56578252 100644 --- a/packages/devextreme-react/src/autocomplete.ts +++ b/packages/devextreme-react/src/autocomplete.ts @@ -246,7 +246,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -278,6 +277,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/color-box.ts b/packages/devextreme-react/src/color-box.ts index e0dcebf97566..b696bc08227b 100644 --- a/packages/devextreme-react/src/color-box.ts +++ b/packages/devextreme-react/src/color-box.ts @@ -237,7 +237,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -269,6 +268,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index 3e8ce77f0bc8..e5efdc3db829 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -1640,7 +1640,6 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -1672,6 +1671,7 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; @@ -2833,7 +2833,6 @@ type IPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -2865,6 +2864,7 @@ type IPopupProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/date-box.ts b/packages/devextreme-react/src/date-box.ts index 2634db701e33..2ad7ce6de57c 100644 --- a/packages/devextreme-react/src/date-box.ts +++ b/packages/devextreme-react/src/date-box.ts @@ -330,7 +330,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -362,6 +361,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/date-range-box.ts b/packages/devextreme-react/src/date-range-box.ts index 038d42c4b559..734ed4f60eae 100644 --- a/packages/devextreme-react/src/date-range-box.ts +++ b/packages/devextreme-react/src/date-range-box.ts @@ -335,7 +335,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -367,6 +366,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/drop-down-box.ts b/packages/devextreme-react/src/drop-down-box.ts index 71eec64f3ae8..05222546cc2f 100644 --- a/packages/devextreme-react/src/drop-down-box.ts +++ b/packages/devextreme-react/src/drop-down-box.ts @@ -241,7 +241,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -273,6 +272,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/drop-down-button.ts b/packages/devextreme-react/src/drop-down-button.ts index b1b9715f635c..528e0d883b23 100644 --- a/packages/devextreme-react/src/drop-down-button.ts +++ b/packages/devextreme-react/src/drop-down-button.ts @@ -196,7 +196,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -228,6 +227,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/lookup.ts b/packages/devextreme-react/src/lookup.ts index 323e92733058..e8e4ba676446 100644 --- a/packages/devextreme-react/src/lookup.ts +++ b/packages/devextreme-react/src/lookup.ts @@ -204,7 +204,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ deferRendering?: boolean; disabled?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; height?: number | string; hideEvent?: Record | string | undefined | { delay?: number | undefined; @@ -237,6 +236,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ name?: string | undefined; }; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; target?: any | string | undefined; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/select-box.ts b/packages/devextreme-react/src/select-box.ts index 0e34281670a0..9ba89de55cee 100644 --- a/packages/devextreme-react/src/select-box.ts +++ b/packages/devextreme-react/src/select-box.ts @@ -255,7 +255,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -287,6 +286,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/tag-box.ts b/packages/devextreme-react/src/tag-box.ts index c472a95097c4..fd23233126c4 100644 --- a/packages/devextreme-react/src/tag-box.ts +++ b/packages/devextreme-react/src/tag-box.ts @@ -261,7 +261,6 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -293,6 +292,7 @@ type IDropDownOptionsProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index 9a26111a565a..a618090fdfff 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -1409,7 +1409,6 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -1441,6 +1440,7 @@ type IFilterBuilderPopupProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; @@ -2465,7 +2465,6 @@ type IPopupProps = React.PropsWithChildren<{ dragEnabled?: boolean; dragOutsideBoundary?: boolean; enableBodyScroll?: boolean; - focusLoopEnabled?: boolean; focusStateEnabled?: boolean; fullScreen?: boolean; height?: number | string; @@ -2497,6 +2496,7 @@ type IPopupProps = React.PropsWithChildren<{ shadingColor?: string; showCloseButton?: boolean; showTitle?: boolean; + tabFocusLoopEnabled?: boolean; tabIndex?: number; title?: string; titleTemplate?: ((titleElement: any) => string | any) | template; diff --git a/packages/devextreme-vue/src/autocomplete.ts b/packages/devextreme-vue/src/autocomplete.ts index dbc1d163afa9..86376919ca72 100644 --- a/packages/devextreme-vue/src/autocomplete.ts +++ b/packages/devextreme-vue/src/autocomplete.ts @@ -468,7 +468,6 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -500,6 +499,7 @@ const DxDropDownOptionsConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -519,7 +519,6 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -551,6 +550,7 @@ const DxDropDownOptionsConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/color-box.ts b/packages/devextreme-vue/src/color-box.ts index b5daadbd68cb..084037610749 100644 --- a/packages/devextreme-vue/src/color-box.ts +++ b/packages/devextreme-vue/src/color-box.ts @@ -417,7 +417,6 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -449,6 +448,7 @@ const DxDropDownOptionsConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -468,7 +468,6 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -500,6 +499,7 @@ const DxDropDownOptionsConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 6d02d72dd74c..3015cf797c17 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -2230,7 +2230,6 @@ const DxFilterBuilderPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -2262,6 +2261,7 @@ const DxFilterBuilderPopupConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -2281,7 +2281,6 @@ const DxFilterBuilderPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -2313,6 +2312,7 @@ const DxFilterBuilderPopupConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, @@ -3499,7 +3499,6 @@ const DxPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -3531,6 +3530,7 @@ const DxPopupConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -3550,7 +3550,6 @@ const DxPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -3582,6 +3581,7 @@ const DxPopupConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/date-box.ts b/packages/devextreme-vue/src/date-box.ts index 680c1cde13da..a576e9be9fb8 100644 --- a/packages/devextreme-vue/src/date-box.ts +++ b/packages/devextreme-vue/src/date-box.ts @@ -606,7 +606,6 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -638,6 +637,7 @@ const DxDropDownOptionsConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -657,7 +657,6 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -689,6 +688,7 @@ const DxDropDownOptionsConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/date-range-box.ts b/packages/devextreme-vue/src/date-range-box.ts index 89812c26a106..af22436586c6 100644 --- a/packages/devextreme-vue/src/date-range-box.ts +++ b/packages/devextreme-vue/src/date-range-box.ts @@ -615,7 +615,6 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -647,6 +646,7 @@ const DxDropDownOptionsConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -666,7 +666,6 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -698,6 +697,7 @@ const DxDropDownOptionsConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/drop-down-box.ts b/packages/devextreme-vue/src/drop-down-box.ts index b7ac00825c5c..e8c59f2d12ea 100644 --- a/packages/devextreme-vue/src/drop-down-box.ts +++ b/packages/devextreme-vue/src/drop-down-box.ts @@ -432,7 +432,6 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -464,6 +463,7 @@ const DxDropDownOptionsConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -483,7 +483,6 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -515,6 +514,7 @@ const DxDropDownOptionsConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/drop-down-button.ts b/packages/devextreme-vue/src/drop-down-button.ts index 3dd25c126312..e41d25fa9f4f 100644 --- a/packages/devextreme-vue/src/drop-down-button.ts +++ b/packages/devextreme-vue/src/drop-down-button.ts @@ -311,7 +311,6 @@ const DxDropDownOptionsConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -343,6 +342,7 @@ const DxDropDownOptionsConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -362,7 +362,6 @@ const DxDropDownOptionsConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -394,6 +393,7 @@ const DxDropDownOptionsConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/lookup.ts b/packages/devextreme-vue/src/lookup.ts index 64788d5f4fef..b18f6ecdf351 100644 --- a/packages/devextreme-vue/src/lookup.ts +++ b/packages/devextreme-vue/src/lookup.ts @@ -444,7 +444,6 @@ const DxDropDownOptionsConfig = { "update:deferRendering": null, "update:disabled": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:height": null, "update:hideEvent": null, "update:hideOnOutsideClick": null, @@ -471,6 +470,7 @@ const DxDropDownOptionsConfig = { "update:showCloseButton": null, "update:showEvent": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:target": null, "update:title": null, "update:titleTemplate": null, @@ -486,7 +486,6 @@ const DxDropDownOptionsConfig = { deferRendering: Boolean, disabled: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, height: [Number, String], hideEvent: [Object, String] as PropType | string>, hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, @@ -513,6 +512,7 @@ const DxDropDownOptionsConfig = { showCloseButton: Boolean, showEvent: [Object, String] as PropType | string>, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, target: {}, title: String, titleTemplate: {}, diff --git a/packages/devextreme-vue/src/popover.ts b/packages/devextreme-vue/src/popover.ts index 3ad16c73d8b1..d60c1aa45090 100644 --- a/packages/devextreme-vue/src/popover.ts +++ b/packages/devextreme-vue/src/popover.ts @@ -50,7 +50,6 @@ type AccessibleOptions = Pick | string>, hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, @@ -125,6 +124,7 @@ const componentConfig = { showCloseButton: Boolean, showEvent: [Object, String] as PropType | string>, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, target: {}, title: String, titleTemplate: {}, @@ -142,7 +142,6 @@ const componentConfig = { "update:deferRendering": null, "update:disabled": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:height": null, "update:hideEvent": null, "update:hideOnOutsideClick": null, @@ -169,6 +168,7 @@ const componentConfig = { "update:showCloseButton": null, "update:showEvent": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:target": null, "update:title": null, "update:titleTemplate": null, diff --git a/packages/devextreme-vue/src/popup.ts b/packages/devextreme-vue/src/popup.ts index df569f6987db..b7cd83dcaa49 100644 --- a/packages/devextreme-vue/src/popup.ts +++ b/packages/devextreme-vue/src/popup.ts @@ -51,7 +51,6 @@ type AccessibleOptions = Pick | string>, hideOnOutsideClick: [Boolean, Function] as PropType boolean))>, @@ -103,6 +102,7 @@ const componentConfig = { shading: Boolean, shadingColor: String, showEvent: [Object, String] as PropType | string>, + tabFocusLoopEnabled: Boolean, target: {}, visible: Boolean, width: [Number, String], @@ -116,7 +116,6 @@ const componentConfig = { "update:contentTemplate": null, "update:deferRendering": null, "update:disabled": null, - "update:focusLoopEnabled": null, "update:height": null, "update:hideEvent": null, "update:hideOnOutsideClick": null, @@ -140,6 +139,7 @@ const componentConfig = { "update:shading": null, "update:shadingColor": null, "update:showEvent": null, + "update:tabFocusLoopEnabled": null, "update:target": null, "update:visible": null, "update:width": null, diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index 1cd588f32a13..890d50a06aae 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -2007,7 +2007,6 @@ const DxFilterBuilderPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -2039,6 +2038,7 @@ const DxFilterBuilderPopupConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -2058,7 +2058,6 @@ const DxFilterBuilderPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -2090,6 +2089,7 @@ const DxFilterBuilderPopupConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, @@ -3141,7 +3141,6 @@ const DxPopupConfig = { "update:dragEnabled": null, "update:dragOutsideBoundary": null, "update:enableBodyScroll": null, - "update:focusLoopEnabled": null, "update:focusStateEnabled": null, "update:fullScreen": null, "update:height": null, @@ -3173,6 +3172,7 @@ const DxPopupConfig = { "update:shadingColor": null, "update:showCloseButton": null, "update:showTitle": null, + "update:tabFocusLoopEnabled": null, "update:tabIndex": null, "update:title": null, "update:titleTemplate": null, @@ -3192,7 +3192,6 @@ const DxPopupConfig = { dragEnabled: Boolean, dragOutsideBoundary: Boolean, enableBodyScroll: Boolean, - focusLoopEnabled: Boolean, focusStateEnabled: Boolean, fullScreen: Boolean, height: [Number, String], @@ -3224,6 +3223,7 @@ const DxPopupConfig = { shadingColor: String, showCloseButton: Boolean, showTitle: Boolean, + tabFocusLoopEnabled: Boolean, tabIndex: Number, title: String, titleTemplate: {}, diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts index f039a5956c0c..5d85ba5e8c1c 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts @@ -173,7 +173,7 @@ export class ColumnChooserView extends ColumnsView { height: columnChooserOptions.height, rtlEnabled: that.option('rtlEnabled'), container: columnChooserOptions.container, - focusLoopEnabled: true, + tabFocusLoopEnabled: true, _ignoreCloseOnChildEscape: true, } as PopupProperties; diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts index 0e798bdab60a..224eb2dc6990 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts @@ -330,7 +330,7 @@ export class HeaderFilterView extends Modules.View { // T321243 component.option('animation', component._getDefaultOptions().animation); }, - focusLoopEnabled: true, + tabFocusLoopEnabled: true, }; if (!isDefined(that._popupContainer)) { diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx index 7d3b86d3bcb1..0b6afe219a20 100644 --- a/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx +++ b/packages/devextreme/js/__internal/grids/new/grid_core/column_chooser/column_chooser.tsx @@ -87,7 +87,7 @@ export class ColumnChooser extends Component { dragEnabled={true} resizeEnabled={true} showCloseButton={true} - focusLoopEnabled={true} + tabFocusLoopEnabled={true} toolbarItems={toolbarItems} wrapperAttr={{ class: this.getPopupWrapperClass() }} diff --git a/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts b/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts index f0aeb6568dec..325243d8c779 100644 --- a/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts +++ b/packages/devextreme/js/__internal/scheduler/m_compact_appointments_helper.ts @@ -59,7 +59,7 @@ export class CompactAppointmentsHelper { clickEvent: this._clickEvent(options.onAppointmentClick).bind(this), dragBehavior: options.allowDrag && this._createTooltipDragBehavior($appointmentCollector).bind(this), isButtonClick: true, - focusLoopEnabled: true, + tabFocusLoopEnabled: true, }; } diff --git a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts index 4266c5e9885f..fda27637da26 100644 --- a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts +++ b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts @@ -50,7 +50,7 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase { onShown: this.onShown.bind(this), contentTemplate: this.getContentTemplate(dataList), wrapperAttr: { class: APPOINTMENT_TOOLTIP_WRAPPER_CLASS }, - focusLoopEnabled: this.extraOptions.focusLoopEnabled, + tabFocusLoopEnabled: this.extraOptions.tabFocusLoopEnabled, }); tooltip.setAria({ diff --git a/packages/devextreme/js/__internal/ui/m_lookup.ts b/packages/devextreme/js/__internal/ui/m_lookup.ts index e7e9bf5466d5..ac3b400977a3 100644 --- a/packages/devextreme/js/__internal/ui/m_lookup.ts +++ b/packages/devextreme/js/__internal/ui/m_lookup.ts @@ -710,7 +710,7 @@ class Lookup extends DropDownList { shading: dropDownOptions.shading, // @ts-expect-error ts-error hideOnOutsideClick: dropDownOptions.hideOnOutsideClick, - focusLoopEnabled: shouldLoopFocusInsidePopup, + tabFocusLoopEnabled: shouldLoopFocusInsidePopup, }); delete result.animation; diff --git a/packages/devextreme/js/__internal/ui/overlay/overlay.ts b/packages/devextreme/js/__internal/ui/overlay/overlay.ts index 36f13e456e22..a452f5d48373 100644 --- a/packages/devextreme/js/__internal/ui/overlay/overlay.ts +++ b/packages/devextreme/js/__internal/ui/overlay/overlay.ts @@ -120,7 +120,7 @@ export interface OverlayProperties extends Properties { zIndex?: number; - focusLoopEnabled?: boolean; + tabFocusLoopEnabled?: boolean; _ignorePreventScrollEventsDeprecation?: boolean; @@ -294,7 +294,7 @@ class Overlay< ignoreChildEvents: true, _checkParentVisibility: true, _fixWrapperPosition: false, - focusLoopEnabled: false, + tabFocusLoopEnabled: false, _ignorePreventScrollEventsDeprecation: false, // NOTE: private option hideTopOverlayHandler: (): void => { @@ -939,11 +939,11 @@ class Overlay< } _toggleTabTerminator(enabled: boolean): void { - const { focusLoopEnabled } = this.option(); + const { tabFocusLoopEnabled } = this.option(); // @ts-expect-error NAME has string | undefined type const eventName = addNamespace('keydown', this.NAME); - if (focusLoopEnabled || enabled) { + if (tabFocusLoopEnabled || enabled) { eventsEngine.on(domAdapter.getDocument(), eventName, this._proxiedTabTerminatorHandler); } else { this._destroyTabTerminator(); @@ -1526,7 +1526,7 @@ class Overlay< switch (name) { case 'animation': break; - case 'focusLoopEnabled': + case 'tabFocusLoopEnabled': case 'shading': { this._toggleShading(this._isVisible()); this._toggleSafariScrolling(); diff --git a/packages/devextreme/js/__internal/ui/popup/m_popup.ts b/packages/devextreme/js/__internal/ui/popup/m_popup.ts index 741778d0ace0..e203ee762a41 100644 --- a/packages/devextreme/js/__internal/ui/popup/m_popup.ts +++ b/packages/devextreme/js/__internal/ui/popup/m_popup.ts @@ -267,7 +267,7 @@ class Popup< useDefaultToolbarButtons: false, useFlatToolbarButtons: false, autoResizeEnabled: true, - focusLoopEnabled: false, + tabFocusLoopEnabled: false, _ignoreCloseOnChildEscape: false, }; } diff --git a/packages/devextreme/js/ui/popup.d.ts b/packages/devextreme/js/ui/popup.d.ts index 47d9288d74c1..9dca815f9ae0 100644 --- a/packages/devextreme/js/ui/popup.d.ts +++ b/packages/devextreme/js/ui/popup.d.ts @@ -126,12 +126,6 @@ export interface dxPopupOptions extends dxOverlayOptions * @public */ dragOutsideBoundary?: boolean; - /** - * @docid - * @default false - * @public - */ - focusLoopEnabled?: boolean; /** * @docid * @default true &for(desktop) @@ -226,6 +220,12 @@ export interface dxPopupOptions extends dxOverlayOptions * @public */ showTitle?: boolean; + /** + * @docid + * @default false + * @public + */ + tabFocusLoopEnabled?: boolean; /** * @docid * @default "" diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js index bd5e2ba37042..1d30b961026d 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js @@ -2192,7 +2192,7 @@ QUnit.module('popup options', { [true, false].forEach(dropDownCentered => { [true, false].forEach(_scrollToSelectedItemEnabled => { [true, false].forEach(usePopover => { - QUnit.test(`Popup should have correct focusLoopEnabled option value if usePopover=${usePopover}, _scrollToSelectedItemEnabled=${_scrollToSelectedItemEnabled}, dropDownCentered=${dropDownCentered}`, function(assert) { + QUnit.test(`Popup should have correct tabFocusLoopEnabled option value if usePopover=${usePopover}, _scrollToSelectedItemEnabled=${_scrollToSelectedItemEnabled}, dropDownCentered=${dropDownCentered}`, function(assert) { const instance = $('#lookupOptions').dxLookup({ _scrollToSelectedItemEnabled, usePopover, @@ -2211,9 +2211,9 @@ QUnit.module('popup options', { ? dropDownCentered : !usePopover; - const { focusLoopEnabled } = popup.option(); + const { tabFocusLoopEnabled } = popup.option(); - assert.strictEqual(focusLoopEnabled, expectedValue, `focusLoopEnabled: ${focusLoopEnabled} is correct`); + assert.strictEqual(tabFocusLoopEnabled, expectedValue, `tabFocusLoopEnabled: ${tabFocusLoopEnabled} is correct`); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js index 6c6825ed8803..4c5dc2891efc 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/overlay.tests.js @@ -3278,11 +3278,11 @@ testModule('focus policy', { assert.strictEqual(getActiveElement(), $firstTabbable.get(0), 'first item focused on press tab on last item (does not go under overlay)'); }); - test('focus in Overlay should be looped if focusLoopEnabled: true and shading: false', function(assert) { + test('focus in Overlay should be looped if tabFocusLoopEnabled: true and shading: false', function(assert) { const overlay = new Overlay($('
').appendTo('#qunit-fixture'), { visible: true, shading: false, - focusLoopEnabled: true, + tabFocusLoopEnabled: true, contentTemplate: $('#focusableTemplate') }); const $content = overlay.$content(); @@ -3300,7 +3300,7 @@ testModule('focus policy', { assert.strictEqual(getActiveElement(), lastFocusableElement, 'last item is focused'); }); - test('focus in Overlay should be looped if shading: false, focusLoopEnabled gets true in runtime', function(assert) { + test('focus in Overlay should be looped if shading: false, tabFocusLoopEnabled gets true in runtime', function(assert) { const overlay = new Overlay($('
').appendTo('#qunit-fixture'), { visible: true, shading: false, @@ -3321,7 +3321,7 @@ testModule('focus policy', { assert.strictEqual(getActiveElement() !== lastFocusableElement, true, 'last item is not focused'); - overlay.option('focusLoopEnabled', true); + overlay.option('tabFocusLoopEnabled', true); $(lastFocusableElement).focus(); $(lastFocusableElement).trigger(this.tabEvent); diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 72dd12ffcefd..e69e30db6bc2 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -25195,10 +25195,6 @@ declare module DevExpress.ui { * [descr:dxPopupOptions.dragOutsideBoundary] */ dragOutsideBoundary?: boolean; - /** - * [descr:dxPopupOptions.focusLoopEnabled] - */ - focusLoopEnabled?: boolean; /** * [descr:dxPopupOptions.focusStateEnabled] */ @@ -25257,6 +25253,10 @@ declare module DevExpress.ui { * [descr:dxPopupOptions.showTitle] */ showTitle?: boolean; + /** + * [descr:dxPopupOptions.tabFocusLoopEnabled] + */ + tabFocusLoopEnabled?: boolean; /** * [descr:dxPopupOptions.title] */