feat(lookup): Add _loopFocus && Set _loopFocus: true && Use _popupTab…

…Handler
DevExpress · Oct 3, 2024 · dc1783f · dc1783f
1 parent ace81ae
commit dc1783f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 35 deletions.
diff --git 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
@@ -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
@@ -102,24 +102,24 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                     items: employeesList,
                     value: employeesList[0],
                     // focusStateEnabled: false,
-                    usePopover: false,
+                    // usePopover: false,
                     searchEnabled: false,
                     inputAttr: {
                         'aria-label': 'Simple lookup',
                     },
                     // applyValueMode: 'useButtons',
-                    dropDownOptions: {
-                        // hideOnOutsideClick: false,
-                        shading: false,
-                        // toolbarItems: [],
-                    },
+                    // dropDownOptions: {
+                    //     // hideOnOutsideClick: false,
+                    //     // shading: true,
+                    //     // toolbarItems: [],
+                    // },
                 });
 
-                $('#products').dxSelectBox({
-                    items: simpleProducts,
-                    inputAttr: { 'aria-label': 'Simple Product' },
-                    // applyValueMode: 'useButtons',
-                });
+                // $('#products').dxSelectBox({
+                //     items: simpleProducts,
+                //     inputAttr: { 'aria-label': 'Simple Product' },
+                //     // applyValueMode: 'useButtons',
+                // });
             });
         </script>
     </div>