@progress/kendo-angular-buttons 14.0.2-develop.11 → 14.0.2-develop.14

package/buttongroup/buttongroup.component.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ButtonComponent } from '../button/button.component';
-import { EventEmitter, QueryList, OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit, ElementRef, SimpleChanges } from '@angular/core';
+import { EventEmitter, QueryList, OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit, ElementRef, SimpleChanges, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonGroupSelection } from '../button/selection-settings';
 import { KendoButtonService } from '../button/button.service';
@@ -14,6 +14,7 @@ import * as i0 from "@angular/core";
  */
 export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit {
     private service;
+    private renderer;
     private element;
     /**
      * By default, the ButtonGroup is enabled.
@@ -61,6 +62,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     buttons: QueryList<ButtonComponent>;
     private _tabIndex;
     private currentTabIndex;
+    private lastFocusedIndex;
     private direction;
     private subs;
     get wrapperClass(): boolean;
@@ -71,7 +73,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     get ariaDisabled(): boolean;
     get wrapperWidth(): string;
     get wrapperTabIndex(): number;
-    constructor(service: KendoButtonService, localization: LocalizationService, element: ElementRef);
+    constructor(service: KendoButtonService, localization: LocalizationService, renderer: Renderer2, element: ElementRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterContentInit(): void;
@@ -85,7 +87,6 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     protected focus(buttons: Array<ButtonComponent>): void;
     private verifySettings;
     private isSelectionSingle;
-    private setButtonsTabIndex;
     private handleSubs;
     private focusHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;

package/esm2020/buttongroup/buttongroup.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ButtonComponent } from '../button/button.component';
-import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef } from '@angular/core';
+import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef, Renderer2 } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
@@ -24,8 +24,9 @@ const tabindex = 'tabindex';
  * Represents the Kendo UI ButtonGroup component for Angular.
  */
 export class ButtonGroupComponent {
-    constructor(service, localization, element) {
+    constructor(service, localization, renderer, element) {
         this.service = service;
+        this.renderer = renderer;
         this.element = element;
         /**
          * The selection mode of the ButtonGroup.
@@ -47,12 +48,14 @@ export class ButtonGroupComponent {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.lastFocusedIndex = -1;
         this.subs = new Subscription();
         this.role = 'group';
         this.focusHandler = () => {
             this.currentTabIndex = -1;
-            const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
-            const index = focusedIndex === -1 ? 0 : focusedIndex;
+            this.defocus(this.buttons.toArray());
+            const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
+            const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
             this.focus(this.buttons.filter((_current, i) => {
                 return i === index;
             }));
@@ -108,12 +111,14 @@ export class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             if (this.navigable) {
-                button.setAttribute(tabindex, '0');
+                this.currentTabIndex = -1;
+                this.renderer.setAttribute(button, tabindex, '0');
             }
         }));
         this.handleSubs('focus', () => this.navigable, this.focusHandler);
         this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
         this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
+            this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
             this.defocus(this.buttons.toArray());
             this.currentTabIndex = this.tabIndex;
         });
@@ -134,12 +139,12 @@ export class ButtonGroupComponent {
         }
         if (isChanged('navigable', changes)) {
             if (changes['navigable'].currentValue) {
-                this.setButtonsTabIndex();
+                this.defocus(this.buttons.toArray());
                 this.currentTabIndex = 0;
             }
             else {
                 this.currentTabIndex = -1;
-                this.buttons.forEach((button) => button.setAttribute(tabindex, '0'));
+                this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
             }
         }
     }
@@ -147,12 +152,12 @@ export class ButtonGroupComponent {
         if (!this.navigable) {
             return;
         }
-        this.setButtonsTabIndex();
+        this.defocus(this.buttons.toArray());
     }
     ngAfterViewChecked() {
         if (this.buttons.length) {
-            this.buttons.first.renderer.addClass(this.buttons.first.element, 'k-group-start');
-            this.buttons.last.renderer.addClass(this.buttons.last.element, 'k-group-end');
+            this.renderer.addClass(this.buttons.first.element, 'k-group-start');
+            this.renderer.addClass(this.buttons.last.element, 'k-group-end');
         }
     }
     ngOnDestroy() {
@@ -162,15 +167,16 @@ export class ButtonGroupComponent {
         this.verifySettings();
     }
     navigateFocus(event) {
-        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+        const navigationButtons = this.buttons.toArray().filter(button => !button.disabled);
+        const focusedIndex = navigationButtons.findIndex(current => current.element.tabIndex !== -1);
         const firstIndex = 0;
-        const lastIndex = this.buttons.length - 1;
+        const lastIndex = navigationButtons.length - 1;
         const eventArgs = new PreventableEvent();
         if (event.keyCode === Keys.ArrowRight && focusedIndex < lastIndex) {
             this.navigate.emit(eventArgs);
             if (!eventArgs.isDefaultPrevented()) {
-                this.defocus(this.buttons.toArray());
-                this.focus(this.buttons.filter((_current, index) => {
+                this.defocus(navigationButtons);
+                this.focus(navigationButtons.filter((_current, index) => {
                     return index === focusedIndex + 1;
                 }));
             }
@@ -178,8 +184,8 @@ export class ButtonGroupComponent {
         if (event.keyCode === Keys.ArrowLeft && focusedIndex > firstIndex) {
             this.navigate.emit(eventArgs);
             if (!eventArgs.isDefaultPrevented()) {
-                this.defocus(this.buttons.toArray());
-                this.focus(this.buttons.filter((_current, index) => {
+                this.defocus(navigationButtons);
+                this.focus(navigationButtons.filter((_current, index) => {
                     return index === focusedIndex - 1;
                 }));
             }
@@ -189,7 +195,7 @@ export class ButtonGroupComponent {
         buttons.forEach((button) => {
             button.setSelected(false);
             if (this.navigable) {
-                button.setAttribute(tabindex, '-1');
+                this.renderer.setAttribute(button, tabindex, '-1');
             }
         });
     }
@@ -197,19 +203,19 @@ export class ButtonGroupComponent {
         buttons.forEach((button) => {
             button.setSelected(true);
             if (this.navigable) {
-                button.setAttribute(tabindex, '0');
+                this.renderer.setAttribute(button, tabindex, '0');
             }
             button.focus();
         });
     }
     defocus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, '-1');
+            this.renderer.setAttribute(button, tabindex, '-1');
         });
     }
     focus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, '0');
+            this.renderer.setAttribute(button, tabindex, '0');
             button.focus();
         });
     }
@@ -223,23 +229,13 @@ export class ButtonGroupComponent {
     isSelectionSingle() {
         return this.selection === 'single';
     }
-    setButtonsTabIndex() {
-        this.buttons.forEach((button) => {
-            if (button.selected) {
-                button.setAttribute(tabindex, '0');
-            }
-            else {
-                button.setAttribute(tabindex, '-1');
-            }
-        });
-    }
     handleSubs(eventName, predicate, handler) {
         this.subs.add(fromEvent(this.element.nativeElement, eventName)
             .pipe(filter(predicate))
             .subscribe(handler));
     }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
@@ -267,7 +263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content select="[kendoButton], kendo-button"></ng-content>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.KendoButtonService }, { type: i2.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1.KendoButtonService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['disabled']
             }], selection: [{

package/esm2020/listbutton/list-button.mjs

@@ -176,15 +176,11 @@ export class ListButton {
      * @hidden
      */
     onItemClick(index) {
+        this.emitItemClickHandler(index);
         this.togglePopupVisibility();
-        if (this.isClosePrevented) {
-            this.emitItemClickHandler(index);
-            return;
-        }
         if (isDocumentAvailable() && !this.isClosePrevented) {
             this.focusButton();
         }
-        this.emitItemClickHandler(index);
     }
     ngOnDestroy() {
         this.openState = false;

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698151253,
-    version: '14.0.2-develop.11',
+    publishDate: 1698306738,
+    version: '14.0.2-develop.14',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/splitbutton/splitbutton.component.mjs

@@ -467,7 +467,7 @@ export class SplitButtonComponent extends ListButton {
      * @hidden
      */
     wrapperContains(element) {
-        return (this.wrapper === element || this.wrapper.contains(element) || (this.popupRef && this.popupRef.popupElement.contains(element)));
+        return (this.wrapper === element || this.wrapper.contains(element));
     }
     /**
      * @hidden

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

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698151253,
-    version: '14.0.2-develop.11',
+    publishDate: 1698306738,
+    version: '14.0.2-develop.14',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -728,8 +728,9 @@ const tabindex = 'tabindex';
  * Represents the Kendo UI ButtonGroup component for Angular.
  */
 class ButtonGroupComponent {
-    constructor(service, localization, element) {
+    constructor(service, localization, renderer, element) {
         this.service = service;
+        this.renderer = renderer;
         this.element = element;
         /**
          * The selection mode of the ButtonGroup.
@@ -751,12 +752,14 @@ class ButtonGroupComponent {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.lastFocusedIndex = -1;
         this.subs = new Subscription();
         this.role = 'group';
         this.focusHandler = () => {
             this.currentTabIndex = -1;
-            const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
-            const index = focusedIndex === -1 ? 0 : focusedIndex;
+            this.defocus(this.buttons.toArray());
+            const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
+            const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
             this.focus(this.buttons.filter((_current, i) => {
                 return i === index;
             }));
@@ -812,12 +815,14 @@ class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             if (this.navigable) {
-                button.setAttribute(tabindex, '0');
+                this.currentTabIndex = -1;
+                this.renderer.setAttribute(button, tabindex, '0');
             }
         }));
         this.handleSubs('focus', () => this.navigable, this.focusHandler);
         this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
         this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
+            this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
             this.defocus(this.buttons.toArray());
             this.currentTabIndex = this.tabIndex;
         });
@@ -838,12 +843,12 @@ class ButtonGroupComponent {
         }
         if (isChanged('navigable', changes)) {
             if (changes['navigable'].currentValue) {
-                this.setButtonsTabIndex();
+                this.defocus(this.buttons.toArray());
                 this.currentTabIndex = 0;
             }
             else {
                 this.currentTabIndex = -1;
-                this.buttons.forEach((button) => button.setAttribute(tabindex, '0'));
+                this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
             }
         }
     }
@@ -851,12 +856,12 @@ class ButtonGroupComponent {
         if (!this.navigable) {
             return;
         }
-        this.setButtonsTabIndex();
+        this.defocus(this.buttons.toArray());
     }
     ngAfterViewChecked() {
         if (this.buttons.length) {
-            this.buttons.first.renderer.addClass(this.buttons.first.element, 'k-group-start');
-            this.buttons.last.renderer.addClass(this.buttons.last.element, 'k-group-end');
+            this.renderer.addClass(this.buttons.first.element, 'k-group-start');
+            this.renderer.addClass(this.buttons.last.element, 'k-group-end');
         }
     }
     ngOnDestroy() {
@@ -866,15 +871,16 @@ class ButtonGroupComponent {
         this.verifySettings();
     }
     navigateFocus(event) {
-        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+        const navigationButtons = this.buttons.toArray().filter(button => !button.disabled);
+        const focusedIndex = navigationButtons.findIndex(current => current.element.tabIndex !== -1);
         const firstIndex = 0;
-        const lastIndex = this.buttons.length - 1;
+        const lastIndex = navigationButtons.length - 1;
         const eventArgs = new PreventableEvent();
         if (event.keyCode === Keys.ArrowRight && focusedIndex < lastIndex) {
             this.navigate.emit(eventArgs);
             if (!eventArgs.isDefaultPrevented()) {
-                this.defocus(this.buttons.toArray());
-                this.focus(this.buttons.filter((_current, index) => {
+                this.defocus(navigationButtons);
+                this.focus(navigationButtons.filter((_current, index) => {
                     return index === focusedIndex + 1;
                 }));
             }
@@ -882,8 +888,8 @@ class ButtonGroupComponent {
         if (event.keyCode === Keys.ArrowLeft && focusedIndex > firstIndex) {
             this.navigate.emit(eventArgs);
             if (!eventArgs.isDefaultPrevented()) {
-                this.defocus(this.buttons.toArray());
-                this.focus(this.buttons.filter((_current, index) => {
+                this.defocus(navigationButtons);
+                this.focus(navigationButtons.filter((_current, index) => {
                     return index === focusedIndex - 1;
                 }));
             }
@@ -893,7 +899,7 @@ class ButtonGroupComponent {
         buttons.forEach((button) => {
             button.setSelected(false);
             if (this.navigable) {
-                button.setAttribute(tabindex, '-1');
+                this.renderer.setAttribute(button, tabindex, '-1');
             }
         });
     }
@@ -901,19 +907,19 @@ class ButtonGroupComponent {
         buttons.forEach((button) => {
             button.setSelected(true);
             if (this.navigable) {
-                button.setAttribute(tabindex, '0');
+                this.renderer.setAttribute(button, tabindex, '0');
             }
             button.focus();
         });
     }
     defocus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, '-1');
+            this.renderer.setAttribute(button, tabindex, '-1');
         });
     }
     focus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, '0');
+            this.renderer.setAttribute(button, tabindex, '0');
             button.focus();
         });
     }
@@ -927,23 +933,13 @@ class ButtonGroupComponent {
     isSelectionSingle() {
         return this.selection === 'single';
     }
-    setButtonsTabIndex() {
-        this.buttons.forEach((button) => {
-            if (button.selected) {
-                button.setAttribute(tabindex, '0');
-            }
-            else {
-                button.setAttribute(tabindex, '-1');
-            }
-        });
-    }
     handleSubs(eventName, predicate, handler) {
         this.subs.add(fromEvent(this.element.nativeElement, eventName)
             .pipe(filter(predicate))
             .subscribe(handler));
     }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
@@ -971,7 +967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content select="[kendoButton], kendo-button"></ng-content>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['disabled']
             }], selection: [{
@@ -1738,15 +1734,11 @@ class ListButton {
      * @hidden
      */
     onItemClick(index) {
+        this.emitItemClickHandler(index);
         this.togglePopupVisibility();
-        if (this.isClosePrevented) {
-            this.emitItemClickHandler(index);
-            return;
-        }
         if (isDocumentAvailable() && !this.isClosePrevented) {
             this.focusButton();
         }
-        this.emitItemClickHandler(index);
     }
     ngOnDestroy() {
         this.openState = false;
@@ -2461,7 +2453,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     wrapperContains(element) {
-        return (this.wrapper === element || this.wrapper.contains(element) || (this.popupRef && this.popupRef.popupElement.contains(element)));
+        return (this.wrapper === element || this.wrapper.contains(element));
     }
     /**
      * @hidden

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

@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1698151253,
-    version: '14.0.2-develop.11',
+    publishDate: 1698306738,
+    version: '14.0.2-develop.14',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -726,8 +726,9 @@ const tabindex = 'tabindex';
  * Represents the Kendo UI ButtonGroup component for Angular.
  */
 class ButtonGroupComponent {
-    constructor(service, localization, element) {
+    constructor(service, localization, renderer, element) {
         this.service = service;
+        this.renderer = renderer;
         this.element = element;
         /**
          * The selection mode of the ButtonGroup.
@@ -749,12 +750,14 @@ class ButtonGroupComponent {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.lastFocusedIndex = -1;
         this.subs = new Subscription();
         this.role = 'group';
         this.focusHandler = () => {
             this.currentTabIndex = -1;
-            const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
-            const index = focusedIndex === -1 ? 0 : focusedIndex;
+            this.defocus(this.buttons.toArray());
+            const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
+            const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
             this.focus(this.buttons.filter((_current, i) => {
                 return i === index;
             }));
@@ -810,12 +813,14 @@ class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             if (this.navigable) {
-                button.setAttribute(tabindex, '0');
+                this.currentTabIndex = -1;
+                this.renderer.setAttribute(button, tabindex, '0');
             }
         }));
         this.handleSubs('focus', () => this.navigable, this.focusHandler);
         this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
         this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
+            this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
             this.defocus(this.buttons.toArray());
             this.currentTabIndex = this.tabIndex;
         });
@@ -836,12 +841,12 @@ class ButtonGroupComponent {
         }
         if (isChanged('navigable', changes)) {
             if (changes['navigable'].currentValue) {
-                this.setButtonsTabIndex();
+                this.defocus(this.buttons.toArray());
                 this.currentTabIndex = 0;
             }
             else {
                 this.currentTabIndex = -1;
-                this.buttons.forEach((button) => button.setAttribute(tabindex, '0'));
+                this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
             }
         }
     }
@@ -849,12 +854,12 @@ class ButtonGroupComponent {
         if (!this.navigable) {
             return;
         }
-        this.setButtonsTabIndex();
+        this.defocus(this.buttons.toArray());
     }
     ngAfterViewChecked() {
         if (this.buttons.length) {
-            this.buttons.first.renderer.addClass(this.buttons.first.element, 'k-group-start');
-            this.buttons.last.renderer.addClass(this.buttons.last.element, 'k-group-end');
+            this.renderer.addClass(this.buttons.first.element, 'k-group-start');
+            this.renderer.addClass(this.buttons.last.element, 'k-group-end');
         }
     }
     ngOnDestroy() {
@@ -864,15 +869,16 @@ class ButtonGroupComponent {
         this.verifySettings();
     }
     navigateFocus(event) {
-        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+        const navigationButtons = this.buttons.toArray().filter(button => !button.disabled);
+        const focusedIndex = navigationButtons.findIndex(current => current.element.tabIndex !== -1);
         const firstIndex = 0;
-        const lastIndex = this.buttons.length - 1;
+        const lastIndex = navigationButtons.length - 1;
         const eventArgs = new PreventableEvent();
         if (event.keyCode === Keys.ArrowRight && focusedIndex < lastIndex) {
             this.navigate.emit(eventArgs);
             if (!eventArgs.isDefaultPrevented()) {
-                this.defocus(this.buttons.toArray());
-                this.focus(this.buttons.filter((_current, index) => {
+                this.defocus(navigationButtons);
+                this.focus(navigationButtons.filter((_current, index) => {
                     return index === focusedIndex + 1;
                 }));
             }
@@ -880,8 +886,8 @@ class ButtonGroupComponent {
         if (event.keyCode === Keys.ArrowLeft && focusedIndex > firstIndex) {
             this.navigate.emit(eventArgs);
             if (!eventArgs.isDefaultPrevented()) {
-                this.defocus(this.buttons.toArray());
-                this.focus(this.buttons.filter((_current, index) => {
+                this.defocus(navigationButtons);
+                this.focus(navigationButtons.filter((_current, index) => {
                     return index === focusedIndex - 1;
                 }));
             }
@@ -891,7 +897,7 @@ class ButtonGroupComponent {
         buttons.forEach((button) => {
             button.setSelected(false);
             if (this.navigable) {
-                button.setAttribute(tabindex, '-1');
+                this.renderer.setAttribute(button, tabindex, '-1');
             }
         });
     }
@@ -899,19 +905,19 @@ class ButtonGroupComponent {
         buttons.forEach((button) => {
             button.setSelected(true);
             if (this.navigable) {
-                button.setAttribute(tabindex, '0');
+                this.renderer.setAttribute(button, tabindex, '0');
             }
             button.focus();
         });
     }
     defocus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, '-1');
+            this.renderer.setAttribute(button, tabindex, '-1');
         });
     }
     focus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, '0');
+            this.renderer.setAttribute(button, tabindex, '0');
             button.focus();
         });
     }
@@ -925,23 +931,13 @@ class ButtonGroupComponent {
     isSelectionSingle() {
         return this.selection === 'single';
     }
-    setButtonsTabIndex() {
-        this.buttons.forEach((button) => {
-            if (button.selected) {
-                button.setAttribute(tabindex, '0');
-            }
-            else {
-                button.setAttribute(tabindex, '-1');
-            }
-        });
-    }
     handleSubs(eventName, predicate, handler) {
         this.subs.add(fromEvent(this.element.nativeElement, eventName)
             .pipe(filter(predicate))
             .subscribe(handler));
     }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
@@ -969,7 +965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content select="[kendoButton], kendo-button"></ng-content>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['disabled']
             }], selection: [{
@@ -1734,15 +1730,11 @@ class ListButton {
      * @hidden
      */
     onItemClick(index) {
+        this.emitItemClickHandler(index);
         this.togglePopupVisibility();
-        if (this.isClosePrevented) {
-            this.emitItemClickHandler(index);
-            return;
-        }
         if (isDocumentAvailable() && !this.isClosePrevented) {
             this.focusButton();
         }
-        this.emitItemClickHandler(index);
     }
     ngOnDestroy() {
         this.openState = false;
@@ -2456,7 +2448,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     wrapperContains(element) {
-        return (this.wrapper === element || this.wrapper.contains(element) || (this.popupRef && this.popupRef.popupElement.contains(element)));
+        return (this.wrapper === element || this.wrapper.contains(element));
     }
     /**
      * @hidden

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "14.0.2-develop.11",
+  "version": "14.0.2-develop.14",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -25,15 +25,15 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "14.0.2-develop.11",
-    "@progress/kendo-angular-l10n": "14.0.2-develop.11",
-    "@progress/kendo-angular-popup": "14.0.2-develop.11",
-    "@progress/kendo-angular-icons": "14.0.2-develop.11",
+    "@progress/kendo-angular-common": "14.0.2-develop.14",
+    "@progress/kendo-angular-l10n": "14.0.2-develop.14",
+    "@progress/kendo-angular-popup": "14.0.2-develop.14",
+    "@progress/kendo-angular-icons": "14.0.2-develop.14",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.0.2-develop.11",
+    "@progress/kendo-angular-schematics": "14.0.2-develop.14",
     "@progress/kendo-common": "^0.2.1"
   },
   "schematics": "./schematics/collection.json",