research

Author: marker dao ®

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();

packages/devextreme/playground/jquery.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>DevExtreme jQuery Example</title>
 
@@ -52,9 +53,13 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <div id="button"></div>
         <script>
             $(() => {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: () => { alert("clicked"); }
+                $("#button").dxLookup({
+                    dataSource: ['A', 'B', 'C'],
+                    showClearButton: true,
+                    focusStateEnabled: true,
+                    searchEnabled: false,
+                    applyButtonText: 'OK',
+                    cancelButtonText: 'Delete',
                 });
             });
         </script>