@progress/kendo-angular-listbox 13.0.0-develop.9 → 13.0.1-develop.1

package/esm2020/data-binding.directive.mjs

@@ -101,6 +101,8 @@ export class DataBindingDirective {
             return;
         }
         const newIndex = dir === 'up' ? index - 1 : index + 1;
+        const navigation = this.selectedBox.keyboardNavigationService;
+        navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
         [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
         this.selectedBox.selectionService.select(newIndex);
     }

package/esm2020/item-selectable.directive.mjs

@@ -22,7 +22,7 @@ export class ItemSelectableDirective {
     }
 }
 ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: i1.ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -35,5 +35,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.k-selected']
             }], onClick: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['mousedown', ['$event']]
             }] } });

package/esm2020/keyboard-navigation.service.mjs

@@ -19,10 +19,10 @@ export class KeyboardNavigationService {
         this.focusedListboxItemIndex = 0;
         this.focusedToolIndex = 0;
         this.onDeleteEvent = new EventEmitter();
-        this.onSelectionChange = new EventEmitter();
         this.onMoveSelectedItem = new EventEmitter();
         this.onTransferAllEvent = new EventEmitter();
         this.onShiftSelectedItem = new EventEmitter();
+        this.onSelectionChange = new EventEmitter();
     }
     onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
         const target = event.target;
@@ -68,10 +68,12 @@ export class KeyboardNavigationService {
             }
         }
     }
-    changeTabindex(previousItem, currentItem) {
+    changeTabindex(previousItem, currentItem, shouldBlur = true) {
         if (previousItem) {
             this.renderer.setAttribute(previousItem, 'tabindex', '-1');
-            previousItem.blur();
+            if (shouldBlur) {
+                previousItem.blur();
+            }
         }
         ;
         if (currentItem) {
@@ -97,8 +99,8 @@ export class KeyboardNavigationService {
         const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
         const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
         this.changeTabindex(previousItem, currentItem);
+        this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
         this.selectedListboxItemIndex = this.focusedListboxItemIndex;
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
@@ -116,7 +118,7 @@ export class KeyboardNavigationService {
             return;
         }
         dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
         this.focusedListboxItemIndex = this.selectedListboxItemIndex;
     }
     onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
@@ -133,17 +135,22 @@ export class KeyboardNavigationService {
         event.stopImmediatePropagation();
         event.preventDefault();
         const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
-        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
-        if (canDeslect) {
+        const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
+        let previousItem;
+        let currentItem;
+        let prevIndex;
+        if (canDeselect) {
+            previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             this.selectedListboxItemIndex = null;
         }
         else {
-            const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
-            const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
-            this.changeTabindex(previousItem, currentItem);
+            previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            prevIndex = this.selectedListboxItemIndex;
             this.selectedListboxItemIndex = this.focusedListboxItemIndex;
         }
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.changeTabindex(previousItem, currentItem, !!currentItem);
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
     }
     onF10Key(tools) {
         if (this.focusedToolIndex && this.focusedToolIndex > -1) {

package/esm2020/listbox.component.mjs

@@ -83,6 +83,7 @@ export class ListBoxComponent {
         this.caretAltRightIcon = caretAltRightIcon;
         this._size = DEFAULT_SIZE;
         this.subs = new Subscription();
+        this.shouldFireFocusIn = true;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -242,16 +243,20 @@ export class ListBoxComponent {
                     this.caretAltLeftIcon :
                     icon;
     }
-    onClickEvent(prevIndex, currentIndex) {
-        this.keyboardNavigationService.selectedListboxItemIndex = currentIndex;
-        this.keyboardNavigationService.focusedListboxItemIndex = currentIndex;
-        this.selectionChange.next(currentIndex);
+    onClickEvent(prevIndex, index) {
+        this.shouldFireFocusIn = false;
+        this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
+        this.keyboardNavigationService.selectedListboxItemIndex = index;
+        this.keyboardNavigationService.focusedListboxItemIndex = index;
         this.zone.onStable.pipe(take(1)).subscribe(() => {
             const listboxItems = this.listboxItems.toArray();
             const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
-            const currentItem = listboxItems[currentIndex].nativeElement;
+            const currentItem = listboxItems[index].nativeElement;
             this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
         });
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.shouldFireFocusIn = true;
+        });
     }
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
@@ -261,14 +266,15 @@ export class ListBoxComponent {
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
-        this.subs.add(navService.onSelectionChange.subscribe((index) => {
+        this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
+            const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
-            this.selectionChange.next({ index, prevIndex: null });
+            this.selectionChange.next({ index, prevIndex });
         }));
     }
     onFocusIn(event) {
         const navService = this.keyboardNavigationService;
-        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
+        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
             this.selectionService.selectedIndex = index;

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1685110941,
-    version: '13.0.0-develop.9',
+    publishDate: 1686070584,
+    version: '13.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/fesm2015/progress-kendo-angular-listbox.mjs

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1685110941,
-    version: '13.0.0-develop.9',
+    publishDate: 1686070584,
+    version: '13.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -201,10 +201,10 @@ class KeyboardNavigationService {
         this.focusedListboxItemIndex = 0;
         this.focusedToolIndex = 0;
         this.onDeleteEvent = new EventEmitter();
-        this.onSelectionChange = new EventEmitter();
         this.onMoveSelectedItem = new EventEmitter();
         this.onTransferAllEvent = new EventEmitter();
         this.onShiftSelectedItem = new EventEmitter();
+        this.onSelectionChange = new EventEmitter();
     }
     onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
         const target = event.target;
@@ -250,10 +250,12 @@ class KeyboardNavigationService {
             }
         }
     }
-    changeTabindex(previousItem, currentItem) {
+    changeTabindex(previousItem, currentItem, shouldBlur = true) {
         if (previousItem) {
             this.renderer.setAttribute(previousItem, 'tabindex', '-1');
-            previousItem.blur();
+            if (shouldBlur) {
+                previousItem.blur();
+            }
         }
         ;
         if (currentItem) {
@@ -280,8 +282,8 @@ class KeyboardNavigationService {
         const previousItem = (_a = listboxItems[this.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
         const currentItem = (_b = listboxItems[this.focusedListboxItemIndex]) === null || _b === void 0 ? void 0 : _b.nativeElement;
         this.changeTabindex(previousItem, currentItem);
+        this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
         this.selectedListboxItemIndex = this.focusedListboxItemIndex;
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
@@ -299,7 +301,7 @@ class KeyboardNavigationService {
             return;
         }
         dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
         this.focusedListboxItemIndex = this.selectedListboxItemIndex;
     }
     onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
@@ -313,21 +315,26 @@ class KeyboardNavigationService {
         }
     }
     onSelectChange(event, listboxItems) {
-        var _a, _b;
+        var _a, _b, _c;
         event.stopImmediatePropagation();
         event.preventDefault();
         const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
-        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
-        if (canDeslect) {
+        const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
+        let previousItem;
+        let currentItem;
+        let prevIndex;
+        if (canDeselect) {
+            previousItem = (_a = listboxItems[this.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
             this.selectedListboxItemIndex = null;
         }
         else {
-            const previousItem = (_a = listboxItems[this.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
-            const currentItem = (_b = listboxItems[this.focusedListboxItemIndex]) === null || _b === void 0 ? void 0 : _b.nativeElement;
-            this.changeTabindex(previousItem, currentItem);
+            previousItem = (_b = listboxItems[this.selectedListboxItemIndex]) === null || _b === void 0 ? void 0 : _b.nativeElement;
+            currentItem = (_c = listboxItems[this.focusedListboxItemIndex]) === null || _c === void 0 ? void 0 : _c.nativeElement;
+            prevIndex = this.selectedListboxItemIndex;
             this.selectedListboxItemIndex = this.focusedListboxItemIndex;
         }
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.changeTabindex(previousItem, currentItem, !!currentItem);
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
     }
     onF10Key(tools) {
         var _a;
@@ -536,7 +543,7 @@ class ItemSelectableDirective {
     }
 }
 ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -549,7 +556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.k-selected']
             }], onClick: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['mousedown', ['$event']]
             }] } });
 
 /* eslint-disable @typescript-eslint/no-inferrable-types */
@@ -612,6 +619,7 @@ class ListBoxComponent {
         this.caretAltRightIcon = caretAltRightIcon;
         this._size = DEFAULT_SIZE;
         this.subs = new Subscription();
+        this.shouldFireFocusIn = true;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -772,16 +780,20 @@ class ListBoxComponent {
                     this.caretAltLeftIcon :
                     icon;
     }
-    onClickEvent(prevIndex, currentIndex) {
-        this.keyboardNavigationService.selectedListboxItemIndex = currentIndex;
-        this.keyboardNavigationService.focusedListboxItemIndex = currentIndex;
-        this.selectionChange.next(currentIndex);
+    onClickEvent(prevIndex, index) {
+        this.shouldFireFocusIn = false;
+        this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
+        this.keyboardNavigationService.selectedListboxItemIndex = index;
+        this.keyboardNavigationService.focusedListboxItemIndex = index;
         this.zone.onStable.pipe(take(1)).subscribe(() => {
             const listboxItems = this.listboxItems.toArray();
             const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
-            const currentItem = listboxItems[currentIndex].nativeElement;
+            const currentItem = listboxItems[index].nativeElement;
             this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
         });
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.shouldFireFocusIn = true;
+        });
     }
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
@@ -791,15 +803,16 @@ class ListBoxComponent {
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
-        this.subs.add(navService.onSelectionChange.subscribe((index) => {
+        this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
+            const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
-            this.selectionChange.next({ index, prevIndex: null });
+            this.selectionChange.next({ index, prevIndex });
         }));
     }
     onFocusIn(event) {
         var _a, _b;
         const navService = this.keyboardNavigationService;
-        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
+        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
             this.selectionService.selectedIndex = index;
@@ -1194,6 +1207,8 @@ class DataBindingDirective {
             return;
         }
         const newIndex = dir === 'up' ? index - 1 : index + 1;
+        const navigation = this.selectedBox.keyboardNavigationService;
+        navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
         [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
         this.selectedBox.selectionService.select(newIndex);
     }

package/fesm2020/progress-kendo-angular-listbox.mjs

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1685110941,
-    version: '13.0.0-develop.9',
+    publishDate: 1686070584,
+    version: '13.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -201,10 +201,10 @@ class KeyboardNavigationService {
         this.focusedListboxItemIndex = 0;
         this.focusedToolIndex = 0;
         this.onDeleteEvent = new EventEmitter();
-        this.onSelectionChange = new EventEmitter();
         this.onMoveSelectedItem = new EventEmitter();
         this.onTransferAllEvent = new EventEmitter();
         this.onShiftSelectedItem = new EventEmitter();
+        this.onSelectionChange = new EventEmitter();
     }
     onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
         const target = event.target;
@@ -250,10 +250,12 @@ class KeyboardNavigationService {
             }
         }
     }
-    changeTabindex(previousItem, currentItem) {
+    changeTabindex(previousItem, currentItem, shouldBlur = true) {
         if (previousItem) {
             this.renderer.setAttribute(previousItem, 'tabindex', '-1');
-            previousItem.blur();
+            if (shouldBlur) {
+                previousItem.blur();
+            }
         }
         ;
         if (currentItem) {
@@ -279,8 +281,8 @@ class KeyboardNavigationService {
         const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
         const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
         this.changeTabindex(previousItem, currentItem);
+        this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
         this.selectedListboxItemIndex = this.focusedListboxItemIndex;
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
     }
     onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
         event.preventDefault();
@@ -298,7 +300,7 @@ class KeyboardNavigationService {
             return;
         }
         dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
         this.focusedListboxItemIndex = this.selectedListboxItemIndex;
     }
     onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
@@ -315,17 +317,22 @@ class KeyboardNavigationService {
         event.stopImmediatePropagation();
         event.preventDefault();
         const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
-        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
-        if (canDeslect) {
+        const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
+        let previousItem;
+        let currentItem;
+        let prevIndex;
+        if (canDeselect) {
+            previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             this.selectedListboxItemIndex = null;
         }
         else {
-            const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
-            const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
-            this.changeTabindex(previousItem, currentItem);
+            previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            prevIndex = this.selectedListboxItemIndex;
             this.selectedListboxItemIndex = this.focusedListboxItemIndex;
         }
-        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.changeTabindex(previousItem, currentItem, !!currentItem);
+        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
     }
     onF10Key(tools) {
         if (this.focusedToolIndex && this.focusedToolIndex > -1) {
@@ -531,7 +538,7 @@ class ItemSelectableDirective {
     }
 }
 ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -544,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.k-selected']
             }], onClick: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['mousedown', ['$event']]
             }] } });
 
 /* eslint-disable @typescript-eslint/no-inferrable-types */
@@ -607,6 +614,7 @@ class ListBoxComponent {
         this.caretAltRightIcon = caretAltRightIcon;
         this._size = DEFAULT_SIZE;
         this.subs = new Subscription();
+        this.shouldFireFocusIn = true;
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
@@ -766,16 +774,20 @@ class ListBoxComponent {
                     this.caretAltLeftIcon :
                     icon;
     }
-    onClickEvent(prevIndex, currentIndex) {
-        this.keyboardNavigationService.selectedListboxItemIndex = currentIndex;
-        this.keyboardNavigationService.focusedListboxItemIndex = currentIndex;
-        this.selectionChange.next(currentIndex);
+    onClickEvent(prevIndex, index) {
+        this.shouldFireFocusIn = false;
+        this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
+        this.keyboardNavigationService.selectedListboxItemIndex = index;
+        this.keyboardNavigationService.focusedListboxItemIndex = index;
         this.zone.onStable.pipe(take(1)).subscribe(() => {
             const listboxItems = this.listboxItems.toArray();
             const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
-            const currentItem = listboxItems[currentIndex].nativeElement;
+            const currentItem = listboxItems[index].nativeElement;
             this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
         });
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.shouldFireFocusIn = true;
+        });
     }
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
@@ -785,14 +797,15 @@ class ListBoxComponent {
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
-        this.subs.add(navService.onSelectionChange.subscribe((index) => {
+        this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
+            const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
-            this.selectionChange.next({ index, prevIndex: null });
+            this.selectionChange.next({ index, prevIndex });
         }));
     }
     onFocusIn(event) {
         const navService = this.keyboardNavigationService;
-        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
+        if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
             this.selectionService.selectedIndex = index;
@@ -1185,6 +1198,8 @@ class DataBindingDirective {
             return;
         }
         const newIndex = dir === 'up' ? index - 1 : index + 1;
+        const navigation = this.selectedBox.keyboardNavigationService;
+        navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
         [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
         this.selectedBox.selectionService.select(newIndex);
     }

package/keyboard-navigation.service.d.ts

@@ -6,6 +6,7 @@ import { ElementRef, EventEmitter, NgZone, Renderer2 } from "@angular/core";
 import { Button } from "@progress/kendo-angular-buttons";
 import { ListBoxComponent } from "./listbox.component";
 import { ActionName, Tool } from "./toolbar";
+import { ListBoxSelectionEvent } from "./selection.service";
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -17,13 +18,13 @@ export declare class KeyboardNavigationService {
     focusedListboxItemIndex: number;
     focusedToolIndex: number;
     onDeleteEvent: EventEmitter<number>;
-    onSelectionChange: EventEmitter<number>;
     onMoveSelectedItem: EventEmitter<string>;
     onTransferAllEvent: EventEmitter<ActionName>;
     onShiftSelectedItem: EventEmitter<ActionName>;
+    onSelectionChange: EventEmitter<ListBoxSelectionEvent>;
     constructor(renderer: Renderer2, zone: NgZone);
     onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef>): void;
-    changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement): void;
+    changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement, shouldBlur?: boolean): void;
     private handleToolbarArrows;
     private onSpaceKey;
     private onArrowUpOrDown;

package/listbox.component.d.ts

@@ -136,6 +136,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     private localizationSubscription;
     private _size;
     private subs;
+    private shouldFireFocusIn;
     constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "13.0.0-develop.9",
+  "version": "13.0.1-develop.1",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,14 +23,14 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "13.0.0-develop.9",
-    "@progress/kendo-angular-common": "13.0.0-develop.9",
-    "@progress/kendo-angular-popup": "13.0.0-develop.9",
+    "@progress/kendo-angular-buttons": "13.0.1-develop.1",
+    "@progress/kendo-angular-common": "13.0.1-develop.1",
+    "@progress/kendo-angular-popup": "13.0.1-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.0.0-develop.9",
+    "@progress/kendo-angular-schematics": "13.0.1-develop.1",
     "@progress/kendo-common": "^0.2.2"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -6,11 +6,11 @@ function default_1(options) {
         // Additional dependencies to install.
         // See https://github.com/telerik/kendo-schematics/issues/28
         peerDependencies: {
-            '@progress/kendo-angular-buttons': '13.0.0-develop.9',
-            '@progress/kendo-angular-common': '13.0.0-develop.9',
-            '@progress/kendo-angular-l10n': '13.0.0-develop.9',
+            '@progress/kendo-angular-buttons': '13.0.1-develop.1',
+            '@progress/kendo-angular-common': '13.0.1-develop.1',
+            '@progress/kendo-angular-l10n': '13.0.1-develop.1',
             // Peer of kendo-angular-buttons
-            '@progress/kendo-angular-popup': '13.0.0-develop.9'
+            '@progress/kendo-angular-popup': '13.0.1-develop.1'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }