diff --git a/packages/devextreme/js/__internal/ui/m_lookup.ts b/packages/devextreme/js/__internal/ui/m_lookup.ts index e8601fa85009..841fbe5d752d 100644 --- a/packages/devextreme/js/__internal/ui/m_lookup.ts +++ b/packages/devextreme/js/__internal/ui/m_lookup.ts @@ -541,17 +541,13 @@ const Lookup = DropDownList.inherit({ return 'auto'; }, - // _popupTabHandler(e) { - // const { usePopover } = this.option(); + _popupTabHandler(e) { + const { usePopover } = this.option(); - // // debugger; - - // if (usePopover) { - // this.callBase(e); - // } - // }, - - _popupTabHandler: noop, + if (usePopover) { + this.callBase(e); + } + }, _renderPopup() { if (this.option('usePopover') && !this.option('dropDownOptions.fullScreen')) { @@ -625,22 +621,24 @@ const Lookup = DropDownList.inherit({ _preventFocusOnPopup: noop, _popupConfig() { - const result = extend(this.callBase(), { + const { + usePopover, + dropDownOptions, + } = this.option(); + const result = extend(this.callBase(), { toolbarItems: this._getPopupToolbarItems(), - hideOnParentScroll: false, onPositioned: null, - maxHeight: '100vh', - - showTitle: this.option('dropDownOptions.showTitle'), - title: this.option('dropDownOptions.title'), + showTitle: dropDownOptions.showTitle, + title: dropDownOptions.title, titleTemplate: this._getTemplateByOption('dropDownOptions.titleTemplate'), - onTitleRendered: this.option('dropDownOptions.onTitleRendered'), - fullScreen: this.option('dropDownOptions.fullScreen'), - shading: this.option('dropDownOptions.shading'), - hideOnOutsideClick: this.option('dropDownOptions.hideOnOutsideClick') || this.option('dropDownOptions.closeOnOutsideClick'), + onTitleRendered: dropDownOptions.onTitleRendered, + fullScreen: dropDownOptions.fullScreen, + shading: dropDownOptions.shading, + hideOnOutsideClick: dropDownOptions.hideOnOutsideClick || dropDownOptions.closeOnOutsideClick, + _loopFocus: !usePopover, }); delete result.animation; @@ -661,7 +659,8 @@ const Lookup = DropDownList.inherit({ } each(['position', 'animation', 'width', 'height'], (_, optionName) => { - const popupOptionValue = this.option(`dropDownOptions.${optionName}`); + const popupOptionValue = dropDownOptions[optionName]; + if (popupOptionValue !== undefined) { result[optionName] = popupOptionValue; } diff --git a/packages/devextreme/js/__internal/ui/overlay/m_overlay.ts b/packages/devextreme/js/__internal/ui/overlay/m_overlay.ts index de1ae1c61c75..4aba58fbfa2d 100644 --- a/packages/devextreme/js/__internal/ui/overlay/m_overlay.ts +++ b/packages/devextreme/js/__internal/ui/overlay/m_overlay.ts @@ -164,6 +164,7 @@ const Overlay: typeof OverlayInstance = Widget.inherit({ _checkParentVisibility: true, _hideOnParentScrollTarget: undefined, _fixWrapperPosition: false, + _loopFocus: false, }); }, @@ -684,9 +685,12 @@ const Overlay: typeof OverlayInstance = Widget.inherit({ }, _toggleTabTerminator(enabled) { - // debugger + // eslint-disable-next-line @typescript-eslint/naming-convention + const { _loopFocus } = this.option(); + const eventName = addNamespace('keydown', this.NAME); - if (enabled) { + + if (_loopFocus || enabled) { eventsEngine.on(domAdapter.getDocument(), eventName, this._proxiedTabTerminatorHandler); } else { eventsEngine.off(domAdapter.getDocument(), eventName, this._proxiedTabTerminatorHandler); @@ -716,7 +720,6 @@ const Overlay: typeof OverlayInstance = Widget.inherit({ }, _tabKeyHandler(e) { - // debugger if (normalizeKeyName(e) !== TAB_KEY || !this._isTopOverlay()) { return; } @@ -1160,6 +1163,9 @@ const Overlay: typeof OverlayInstance = Widget.inherit({ switch (name) { case 'animation': break; + case '_loopFocus': + this._toggleTabTerminator(); + break; case 'shading': this._toggleShading(this.option('visible')); this._toggleSafariScrolling(); diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html index 1d9e72ba2973..df5340c41d52 100644 --- a/packages/devextreme/playground/jquery.html +++ b/packages/devextreme/playground/jquery.html @@ -102,24 +102,24 @@