Lookup: Fix keyboard navigation through list and toolbar items (T1327208)

packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts

@@ -48,9 +48,9 @@ const SEARCH_MODES = ['startswith', 'contains', 'endwith', 'notcontains'];
 const useCompositionEvents = devices.real().platform !== 'android';
 
 interface DropDownListProperties extends Omit<dxDropDownListOptions<DropDownList>,
-'onOpened' | 'onClosed'
-| 'onChange' | 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' | 'onKeyDown' | 'onKeyUp' | 'onPaste'
-| 'onValueChanged' | 'validationMessagePosition' | 'onContentReady' | 'onDisposing' | 'onOptionChanged' | 'onInitialized'> {
+  'onOpened' | 'onClosed'
+  | 'onChange' | 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' | 'onKeyDown' | 'onKeyUp' | 'onPaste'
+  | 'onValueChanged' | 'validationMessagePosition' | 'onContentReady' | 'onDisposing' | 'onOptionChanged' | 'onInitialized'> {
   encodeNoDataText?: boolean;
 }
 
@@ -624,7 +624,7 @@ class DropDownList<
       dataSource: this._getDataSource(),
       _dataController: this._dataController,
       hoverStateEnabled: this._isDesktopDevice() ? hoverStateEnabled : false,
-      focusStateEnabled: this._isDesktopDevice() ? focusStateEnabled : false,
+      focusStateEnabled,
       _onItemsRendered: (): void => {
         // @ts-expect-error ts-error
         this._popup.repaint();
@@ -699,7 +699,7 @@ class DropDownList<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _listItemClickHandler(e?): void {}
+  _listItemClickHandler(e?): void { }
 
   _setListDataSource(): void {
     if (!this._list) {
@@ -733,10 +733,10 @@ class DropDownList<
   _canKeepDataSource(): boolean {
     const isMinSearchLengthExceeded = this._isMinSearchLengthExceeded();
     return this._dataController.isLoaded()
-            && this.option('showDataBeforeSearch')
-            && this.option('minSearchLength')
-            && !isMinSearchLengthExceeded
-            && !this._isLastMinSearchLengthExceeded;
+      && this.option('showDataBeforeSearch')
+      && this.option('minSearchLength')
+      && !isMinSearchLengthExceeded
+      && !this._isLastMinSearchLengthExceeded;
   }
 
   _searchValue() {
@@ -992,10 +992,13 @@ class DropDownList<
     this._dataExpressionOptionChanged(args);
     switch (args.name) {
       case 'hoverStateEnabled':
-      case 'focusStateEnabled':
         this._isDesktopDevice() && this._setListOption(args.name, args.value);
         super._optionChanged(args);
         break;
+      case 'focusStateEnabled':
+        this._setListOption(args.name, args.value);
+        super._optionChanged(args);
+        break;
       case 'items':
         if (!this.option('dataSource')) {
           this._processDataSourceChanging();

packages/devextreme/js/__internal/ui/m_lookup.ts

@@ -294,7 +294,7 @@ class Lookup extends DropDownList<LookupProperties> {
     });
   }
 
-  _fireContentReadyAction() {}
+  _fireContentReadyAction() { }
 
   _popupWrapperClass() {
     return '';
@@ -371,7 +371,7 @@ class Lookup extends DropDownList<LookupProperties> {
     }
   }
 
-  _renderButtonContainers(): void {}
+  _renderButtonContainers(): void { }
 
   _renderFieldTemplate(template) {
     this._$field.empty();
@@ -671,7 +671,7 @@ class Lookup extends DropDownList<LookupProperties> {
     }
   }
 
-  _preventFocusOnPopup(): void {}
+  _preventFocusOnPopup(): void { }
 
   _shouldLoopFocusInsidePopup(): boolean {
     const {
@@ -765,32 +765,43 @@ class Lookup extends DropDownList<LookupProperties> {
   }
 
   _popupToolbarItemsConfig() {
+    const { focusStateEnabled, applyButtonText: text } = this.option();
+
     return [
       {
         shortcut: 'done',
         options: {
+          text,
+          focusStateEnabled,
           onClick: this._applyButtonHandler.bind(this),
-          text: this.option('applyButtonText'),
         },
       },
     ];
   }
 
   _getCancelButtonConfig() {
-    return this.option('showCancelButton') ? {
+    const { focusStateEnabled, cancelButtonText: text, showCancelButton } = this.option();
+
+    return showCancelButton ? {
       shortcut: 'cancel',
-      onClick: this._cancelButtonHandler.bind(this),
       options: {
-        text: this.option('cancelButtonText'),
+        text,
+        focusStateEnabled,
       },
+      onClick: this._cancelButtonHandler.bind(this),
     } : null;
   }
 
   _getClearButtonConfig() {
-    return this.option('showClearButton') ? {
+    const { showClearButton, clearButtonText: text, focusStateEnabled } = this.option();
+
+    return showClearButton ? {
       shortcut: 'clear',
+      options: {
+        text,
+        focusStateEnabled,
+      },
       onClick: this._resetValue.bind(this),
-      options: { text: this.option('clearButtonText') },
     } : null;
   }
 
@@ -832,7 +843,7 @@ class Lookup extends DropDownList<LookupProperties> {
     this._renderSearch();
   }
 
-  _renderValueChangeEvent(): void {}
+  _renderValueChangeEvent(): void { }
 
   _renderSearch(): void {
     const isSearchEnabled = this.option('searchEnabled');
@@ -861,8 +872,10 @@ class Lookup extends DropDownList<LookupProperties> {
         onDisposing: () => isKeyboardListeningEnabled = false,
         // eslint-disable-next-line no-return-assign
         onFocusIn: () => isKeyboardListeningEnabled = true,
-        // eslint-disable-next-line no-return-assign
-        onFocusOut: () => isKeyboardListeningEnabled = false,
+        onFocusOut: () => {
+          isKeyboardListeningEnabled = false;
+          this._list?.option('focusedElement', null);
+        },
         // @ts-expect-error ts-error
         onKeyboardHandled: (opts) => isKeyboardListeningEnabled && this._list._keyboardHandler(opts),
         onValueChanged: (e) => this._searchHandler(e),
@@ -954,11 +967,11 @@ class Lookup extends DropDownList<LookupProperties> {
     this._searchBox?.option('placeholder', placeholder);
   }
 
-  _setAriaTargetForList(): void {}
+  _setAriaTargetForList(): void { }
 
   _listConfig() {
     return extend(super._listConfig(), {
-      tabIndex: 0,
+      tabIndex: this.option('searchEnabled') ? -1 : 0,
       grouped: this.option('grouped'),
       groupTemplate: this._getTemplateByOption('groupTemplate'),
       pullRefreshEnabled: this.option('pullRefreshEnabled'),
@@ -1093,6 +1106,7 @@ class Lookup extends DropDownList<LookupProperties> {
           this._removeSearch();
           this._renderSearch();
         }
+        this._setListOption('tabIndex', value ? -1 : 0);
         break;
       case 'searchPlaceholder':
         this._setSearchPlaceholder();
@@ -1109,6 +1123,11 @@ class Lookup extends DropDownList<LookupProperties> {
       case 'placeholder':
         this._invalidate();
         break;
+      case 'focusStateEnabled':
+        this._setPopupOption('toolbarItems', this._getPopupToolbarItems());
+        // @ts-expect-error ts-error
+        super._optionChanged(...arguments);
+        break;
       case 'clearButtonText':
       case 'showClearButton':
       case 'showCancelButton':

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownList.tests.js

@@ -101,7 +101,7 @@ QUnit.module('focus policy', {
         }
     });
 
-    QUnit.test('hover and focus states for list should be initially disabled on mobile devices only', function(assert) {
+    QUnit.test('hover state for list should be initially disabled on mobile devices, focus state should follow parent', function(assert) {
         this.instance.option('opened', true);
 
         const list = $(`.${LIST_CLASS}`).dxList('instance');
@@ -111,11 +111,11 @@ QUnit.module('focus policy', {
             assert.ok(list.option('focusStateEnabled'), 'focus state should be enabled on desktop');
         } else {
             assert.notOk(list.option('hoverStateEnabled'), 'hover state should be disabled on mobiles');
-            assert.notOk(list.option('focusStateEnabled'), 'focus state should be disabled on mobiles');
+            assert.ok(list.option('focusStateEnabled'), 'focus state should follow parent value on mobiles');
         }
     });
 
-    QUnit.test('changing hover and focus states for list should be enabled on desktop only', function(assert) {
+    QUnit.test('changing hover state for list should be enabled on desktop only, focus state should be enabled on both desktop and mobile', function(assert) {
         this.instance.option('opened', true);
 
         const list = $(`.${LIST_CLASS}`).dxList('instance');
@@ -126,10 +126,13 @@ QUnit.module('focus policy', {
             assert.notOk(list.option('hoverStateEnabled'), 'hover state should be changed to disabled on desktop');
             assert.notOk(list.option('focusStateEnabled'), 'focus state should be changed to disabled on desktop');
         } else {
+            assert.notOk(list.option('hoverStateEnabled'), 'hover state should not be changed on mobiles');
+            assert.notOk(list.option('focusStateEnabled'), 'focus state should be changed on mobiles');
+
             this.instance.option({ hoverStateEnabled: true, focusStateEnabled: true });
 
             assert.notOk(list.option('hoverStateEnabled'), 'hover state should not be changed on mobiles');
-            assert.notOk(list.option('focusStateEnabled'), 'focus state should not be changed on mobiles');
+            assert.ok(list.option('focusStateEnabled'), 'focus state should be changed on mobiles');
         }
     });