@progress/kendo-angular-buttons 16.4.0-develop.1 → 16.4.0-develop.2

package/esm2020/floatingactionbutton/floatingactionbutton.component.mjs

@@ -144,6 +144,7 @@ export class FloatingActionButtonComponent {
         this.rtl = false;
         this.animationEnd = new EventEmitter();
         this.initialSetup = true;
+        this.focusChangedProgrammatically = false;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
@@ -273,6 +274,7 @@ export class FloatingActionButtonComponent {
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
+        this.isOpen && this.toggleDial(false);
     }
     /**
      * Indicates whether the FloatingActionButton is currently open.
@@ -283,7 +285,9 @@ export class FloatingActionButtonComponent {
      */
     focus() {
         if (isDocumentAvailable()) {
+            this.focusChangedProgrammatically = true;
             this.button.nativeElement.focus();
+            this.focusChangedProgrammatically = false;
         }
     }
     /**
@@ -291,7 +295,9 @@ export class FloatingActionButtonComponent {
      */
     blur() {
         if (isDocumentAvailable()) {
+            this.focusChangedProgrammatically = true;
             this.button.nativeElement.blur();
+            this.focusChangedProgrammatically = false;
         }
     }
     /**
@@ -321,19 +327,19 @@ export class FloatingActionButtonComponent {
      * @hidden
      */
     get ariaExpanded() {
-        return this.hasDialItems ? this.isOpen : null;
+        return this.hasDialItems ? this.isOpen : undefined;
     }
     /**
      * @hidden
      */
     get ariaHasPopup() {
-        return this.hasDialItems ? 'menu' : null;
+        return this.hasDialItems ? 'menu' : undefined;
     }
     /**
      * @hidden
      */
     get ariaControls() {
-        return this.hasDialItems ? this.dialListId : null;
+        return this.hasDialItems ? this.isOpen ? this.dialListId : undefined : undefined;
     }
     /**
      * @hidden
@@ -363,13 +369,16 @@ export class FloatingActionButtonComponent {
     /**
      * @hidden
      */
-    keyDownHandler(event) {
-        this.keyHandler(event);
+    pointerdownHandler(e) {
+        if (this.isOpen) {
+            e.preventDefault();
+            this.focus();
+        }
     }
     /**
      * @hidden
      */
-    keyHandler(event, keyEvent) {
+    keyDownHandler(event) {
         if (this.disabled) {
             return;
         }
@@ -379,7 +388,6 @@ export class FloatingActionButtonComponent {
             altKey: event.altKey,
             current: focused,
             keyCode,
-            keyEvent: keyEvent,
             max: this.dialItems ? this.dialItems.length - 1 : 0,
             min: 0,
             flipNavigation: this.align.vertical === 'bottom'
@@ -387,6 +395,9 @@ export class FloatingActionButtonComponent {
         if (action !== NavigationAction.Undefined && action !== NavigationAction.Tab) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && event.target.closest(`#${this.dialListId}`)) {
+            this.focus();
+        }
         if (action === NavigationAction.EnterUp && !this.hasDialItems) {
             this.button.nativeElement.click();
         }
@@ -412,17 +423,66 @@ export class FloatingActionButtonComponent {
      * @hidden
      */
     focusHandler() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.focusChangedProgrammatically) {
             this.onFocus.emit();
         }
     }
     /**
      * @hidden
      */
-    blurHandler() {
-        this.onBlur.emit();
+    blurHandler(e) {
+        const focusInList = e.relatedTarget && (e.relatedTarget.closest(`#${this.dialListId}`));
+        if (focusInList) {
+            return;
+        }
+        !this.focusChangedProgrammatically && this.onBlur.emit();
         this.toggleDialWithEvents(false);
     }
+    /**
+     * @hidden
+     */
+    focusOutHandler(e) {
+        const focusInList = e.relatedTarget && (e.relatedTarget.closest(`#${this.dialListId}`));
+        const focusOnButton = e.relatedTarget === this.button.nativeElement;
+        const shouldClose = !focusInList && !focusOnButton;
+        if (shouldClose) {
+            this.toggleDialWithEvents(false);
+            !this.focusChangedProgrammatically && this.onBlur.emit();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onNavigationEnterPress() {
+        this.ngZone.run(() => {
+            if (this.isOpen) {
+                const focusedIndex = this.focusService.focused;
+                const focusedItem = this.dialItems[focusedIndex];
+                if (focusedItem && focusedItem.disabled) {
+                    return;
+                }
+                if (isPresent(focusedIndex) && focusedIndex !== -1) {
+                    this.onEnterPressed();
+                    return;
+                }
+            }
+            if (!this.isOpen && isDocumentAvailable()) {
+                this.toggleDialWithEvents(true);
+                this.focus();
+            }
+        });
+    }
+    /**
+     * @hidden
+     */
+    onNavigationClose() {
+        if (this.isOpen) {
+            this.ngZone.run(() => {
+                this.toggleDialWithEvents(false);
+                this.focus();
+            });
+        }
+    }
     handleClasses(inputValue, input) {
         if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
@@ -454,6 +514,7 @@ export class FloatingActionButtonComponent {
             this.toggleDialWithEvents(false);
             this.focusService.focused = index;
         }
+        this.focus();
     }
     subscribeNavigationEvents() {
         this.subscriptions.add(this.navigationService.navigate.subscribe(this.onArrowKeyNavigate.bind(this)));
@@ -463,35 +524,6 @@ export class FloatingActionButtonComponent {
     onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
-    onNavigationEnterPress() {
-        this.ngZone.run(() => {
-            if (this.isOpen) {
-                const focusedIndex = this.focusService.focused;
-                const focusedItem = this.dialItems[focusedIndex];
-                if (focusedItem && focusedItem.disabled) {
-                    return;
-                }
-                if (isPresent(focusedIndex) && focusedIndex !== -1) {
-                    this.onEnterPressed();
-                    return;
-                }
-            }
-            if (!this.isOpen && isDocumentAvailable()) {
-                this.toggleDialWithEvents(true);
-                this.button.nativeElement.focus();
-            }
-        });
-    }
-    onNavigationClose() {
-        if (this.isOpen) {
-            this.ngZone.run(() => {
-                this.toggleDialWithEvents(false);
-                if (isDocumentAvailable()) {
-                    this.button.nativeElement.focus();
-                }
-            });
-        }
-    }
     alignClass() {
         return `k-pos-${this.align.vertical}-${this.align.horizontal}`;
     }
@@ -569,6 +601,7 @@ export class FloatingActionButtonComponent {
             this.closePopup();
         }
         this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'false');
+        this.focusService.resetFocus();
     }
     isValidAnimation() {
         const animation = this.dialItemAnimation;
@@ -714,10 +747,11 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
-            (blur)="blurHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
-                click: clickHandler
+                click: clickHandler,
+                pointerdown: pointerdownHandler
             }"
             [scope]="this"
         >
@@ -748,6 +782,10 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 [align]="align"
                 [attr.aria-labelledby]="id"
                 (click)="onItemClick($event)"
+                [kendoEventsOutsideAngular]="{
+                    keydown: keyDownHandler.bind(this),
+                    focusout: focusOutHandler.bind(this)
+                }"
             >
             </ul>
         </ng-template>
@@ -781,10 +819,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
-            (blur)="blurHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
-                click: clickHandler
+                click: clickHandler,
+                pointerdown: pointerdownHandler
             }"
             [scope]="this"
         >
@@ -815,6 +854,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [align]="align"
                 [attr.aria-labelledby]="id"
                 (click)="onItemClick($event)"
+                [kendoEventsOutsideAngular]="{
+                    keydown: keyDownHandler.bind(this),
+                    focusout: focusOutHandler.bind(this)
+                }"
             >
             </ul>
         </ng-template>

package/esm2020/focusable/focusable.directive.mjs

@@ -40,11 +40,11 @@ export class FocusableDirective {
         this.subs.add(this.focusService.onFocus.subscribe((index) => {
             if (this.index === index) {
                 this.renderer.addClass(this.element, 'k-focus');
-                this.renderer.setAttribute(this.element, 'tabidnex', '0');
+                this.renderer.setAttribute(this.element, 'tabindex', '0');
                 this.element.focus();
             }
             else {
-                this.renderer.setAttribute(this.element, 'tabidnex', '-1');
+                this.renderer.setAttribute(this.element, 'tabindex', '-1');
                 this.renderer.removeClass(this.element, 'k-focus');
             }
         }));

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: 1719845805,
-    version: '16.4.0-develop.1',
+    publishDate: 1719935751,
+    version: '16.4.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -29,8 +29,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1719845805,
-    version: '16.4.0-develop.1',
+    publishDate: 1719935751,
+    version: '16.4.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1157,11 +1157,11 @@ class FocusableDirective {
         this.subs.add(this.focusService.onFocus.subscribe((index) => {
             if (this.index === index) {
                 this.renderer.addClass(this.element, 'k-focus');
-                this.renderer.setAttribute(this.element, 'tabidnex', '0');
+                this.renderer.setAttribute(this.element, 'tabindex', '0');
                 this.element.focus();
             }
             else {
-                this.renderer.setAttribute(this.element, 'tabidnex', '-1');
+                this.renderer.setAttribute(this.element, 'tabindex', '-1');
                 this.renderer.removeClass(this.element, 'k-focus');
             }
         }));
@@ -4658,6 +4658,7 @@ class FloatingActionButtonComponent {
         this.rtl = false;
         this.animationEnd = new EventEmitter();
         this.initialSetup = true;
+        this.focusChangedProgrammatically = false;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
@@ -4787,6 +4788,7 @@ class FloatingActionButtonComponent {
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
+        this.isOpen && this.toggleDial(false);
     }
     /**
      * Indicates whether the FloatingActionButton is currently open.
@@ -4797,7 +4799,9 @@ class FloatingActionButtonComponent {
      */
     focus() {
         if (isDocumentAvailable()) {
+            this.focusChangedProgrammatically = true;
             this.button.nativeElement.focus();
+            this.focusChangedProgrammatically = false;
         }
     }
     /**
@@ -4805,7 +4809,9 @@ class FloatingActionButtonComponent {
      */
     blur() {
         if (isDocumentAvailable()) {
+            this.focusChangedProgrammatically = true;
             this.button.nativeElement.blur();
+            this.focusChangedProgrammatically = false;
         }
     }
     /**
@@ -4835,19 +4841,19 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     get ariaExpanded() {
-        return this.hasDialItems ? this.isOpen : null;
+        return this.hasDialItems ? this.isOpen : undefined;
     }
     /**
      * @hidden
      */
     get ariaHasPopup() {
-        return this.hasDialItems ? 'menu' : null;
+        return this.hasDialItems ? 'menu' : undefined;
     }
     /**
      * @hidden
      */
     get ariaControls() {
-        return this.hasDialItems ? this.dialListId : null;
+        return this.hasDialItems ? this.isOpen ? this.dialListId : undefined : undefined;
     }
     /**
      * @hidden
@@ -4877,13 +4883,16 @@ class FloatingActionButtonComponent {
     /**
      * @hidden
      */
-    keyDownHandler(event) {
-        this.keyHandler(event);
+    pointerdownHandler(e) {
+        if (this.isOpen) {
+            e.preventDefault();
+            this.focus();
+        }
     }
     /**
      * @hidden
      */
-    keyHandler(event, keyEvent) {
+    keyDownHandler(event) {
         if (this.disabled) {
             return;
         }
@@ -4893,7 +4902,6 @@ class FloatingActionButtonComponent {
             altKey: event.altKey,
             current: focused,
             keyCode,
-            keyEvent: keyEvent,
             max: this.dialItems ? this.dialItems.length - 1 : 0,
             min: 0,
             flipNavigation: this.align.vertical === 'bottom'
@@ -4901,6 +4909,9 @@ class FloatingActionButtonComponent {
         if (action !== NavigationAction.Undefined && action !== NavigationAction.Tab) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && event.target.closest(`#${this.dialListId}`)) {
+            this.focus();
+        }
         if (action === NavigationAction.EnterUp && !this.hasDialItems) {
             this.button.nativeElement.click();
         }
@@ -4926,17 +4937,66 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     focusHandler() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.focusChangedProgrammatically) {
             this.onFocus.emit();
         }
     }
     /**
      * @hidden
      */
-    blurHandler() {
-        this.onBlur.emit();
+    blurHandler(e) {
+        const focusInList = e.relatedTarget && (e.relatedTarget.closest(`#${this.dialListId}`));
+        if (focusInList) {
+            return;
+        }
+        !this.focusChangedProgrammatically && this.onBlur.emit();
         this.toggleDialWithEvents(false);
     }
+    /**
+     * @hidden
+     */
+    focusOutHandler(e) {
+        const focusInList = e.relatedTarget && (e.relatedTarget.closest(`#${this.dialListId}`));
+        const focusOnButton = e.relatedTarget === this.button.nativeElement;
+        const shouldClose = !focusInList && !focusOnButton;
+        if (shouldClose) {
+            this.toggleDialWithEvents(false);
+            !this.focusChangedProgrammatically && this.onBlur.emit();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onNavigationEnterPress() {
+        this.ngZone.run(() => {
+            if (this.isOpen) {
+                const focusedIndex = this.focusService.focused;
+                const focusedItem = this.dialItems[focusedIndex];
+                if (focusedItem && focusedItem.disabled) {
+                    return;
+                }
+                if (isPresent(focusedIndex) && focusedIndex !== -1) {
+                    this.onEnterPressed();
+                    return;
+                }
+            }
+            if (!this.isOpen && isDocumentAvailable()) {
+                this.toggleDialWithEvents(true);
+                this.focus();
+            }
+        });
+    }
+    /**
+     * @hidden
+     */
+    onNavigationClose() {
+        if (this.isOpen) {
+            this.ngZone.run(() => {
+                this.toggleDialWithEvents(false);
+                this.focus();
+            });
+        }
+    }
     handleClasses(inputValue, input) {
         if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
@@ -4968,6 +5028,7 @@ class FloatingActionButtonComponent {
             this.toggleDialWithEvents(false);
             this.focusService.focused = index;
         }
+        this.focus();
     }
     subscribeNavigationEvents() {
         this.subscriptions.add(this.navigationService.navigate.subscribe(this.onArrowKeyNavigate.bind(this)));
@@ -4977,35 +5038,6 @@ class FloatingActionButtonComponent {
     onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
-    onNavigationEnterPress() {
-        this.ngZone.run(() => {
-            if (this.isOpen) {
-                const focusedIndex = this.focusService.focused;
-                const focusedItem = this.dialItems[focusedIndex];
-                if (focusedItem && focusedItem.disabled) {
-                    return;
-                }
-                if (isPresent(focusedIndex) && focusedIndex !== -1) {
-                    this.onEnterPressed();
-                    return;
-                }
-            }
-            if (!this.isOpen && isDocumentAvailable()) {
-                this.toggleDialWithEvents(true);
-                this.button.nativeElement.focus();
-            }
-        });
-    }
-    onNavigationClose() {
-        if (this.isOpen) {
-            this.ngZone.run(() => {
-                this.toggleDialWithEvents(false);
-                if (isDocumentAvailable()) {
-                    this.button.nativeElement.focus();
-                }
-            });
-        }
-    }
     alignClass() {
         return `k-pos-${this.align.vertical}-${this.align.horizontal}`;
     }
@@ -5083,6 +5115,7 @@ class FloatingActionButtonComponent {
             this.closePopup();
         }
         this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'false');
+        this.focusService.resetFocus();
     }
     isValidAnimation() {
         const animation = this.dialItemAnimation;
@@ -5228,10 +5261,11 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
-            (blur)="blurHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
-                click: clickHandler
+                click: clickHandler,
+                pointerdown: pointerdownHandler
             }"
             [scope]="this"
         >
@@ -5262,6 +5296,10 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 [align]="align"
                 [attr.aria-labelledby]="id"
                 (click)="onItemClick($event)"
+                [kendoEventsOutsideAngular]="{
+                    keydown: keyDownHandler.bind(this),
+                    focusout: focusOutHandler.bind(this)
+                }"
             >
             </ul>
         </ng-template>
@@ -5295,10 +5333,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
-            (blur)="blurHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
-                click: clickHandler
+                click: clickHandler,
+                pointerdown: pointerdownHandler
             }"
             [scope]="this"
         >
@@ -5329,6 +5368,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [align]="align"
                 [attr.aria-labelledby]="id"
                 (click)="onItemClick($event)"
+                [kendoEventsOutsideAngular]="{
+                    keydown: keyDownHandler.bind(this),
+                    focusout: focusOutHandler.bind(this)
+                }"
             >
             </ul>
         </ng-template>

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

@@ -47,8 +47,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1719845805,
-    version: '16.4.0-develop.1',
+    publishDate: 1719935751,
+    version: '16.4.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1217,11 +1217,11 @@ class FocusableDirective {
         this.subs.add(this.focusService.onFocus.subscribe((index) => {
             if (this.index === index) {
                 this.renderer.addClass(this.element, 'k-focus');
-                this.renderer.setAttribute(this.element, 'tabidnex', '0');
+                this.renderer.setAttribute(this.element, 'tabindex', '0');
                 this.element.focus();
             }
             else {
-                this.renderer.setAttribute(this.element, 'tabidnex', '-1');
+                this.renderer.setAttribute(this.element, 'tabindex', '-1');
                 this.renderer.removeClass(this.element, 'k-focus');
             }
         }));
@@ -4645,6 +4645,7 @@ class FloatingActionButtonComponent {
         this.rtl = false;
         this.animationEnd = new EventEmitter();
         this.initialSetup = true;
+        this.focusChangedProgrammatically = false;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
@@ -4774,6 +4775,7 @@ class FloatingActionButtonComponent {
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
+        this.isOpen && this.toggleDial(false);
     }
     /**
      * Indicates whether the FloatingActionButton is currently open.
@@ -4784,7 +4786,9 @@ class FloatingActionButtonComponent {
      */
     focus() {
         if (isDocumentAvailable()) {
+            this.focusChangedProgrammatically = true;
             this.button.nativeElement.focus();
+            this.focusChangedProgrammatically = false;
         }
     }
     /**
@@ -4792,7 +4796,9 @@ class FloatingActionButtonComponent {
      */
     blur() {
         if (isDocumentAvailable()) {
+            this.focusChangedProgrammatically = true;
             this.button.nativeElement.blur();
+            this.focusChangedProgrammatically = false;
         }
     }
     /**
@@ -4822,19 +4828,19 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     get ariaExpanded() {
-        return this.hasDialItems ? this.isOpen : null;
+        return this.hasDialItems ? this.isOpen : undefined;
     }
     /**
      * @hidden
      */
     get ariaHasPopup() {
-        return this.hasDialItems ? 'menu' : null;
+        return this.hasDialItems ? 'menu' : undefined;
     }
     /**
      * @hidden
      */
     get ariaControls() {
-        return this.hasDialItems ? this.dialListId : null;
+        return this.hasDialItems ? this.isOpen ? this.dialListId : undefined : undefined;
     }
     /**
      * @hidden
@@ -4864,13 +4870,16 @@ class FloatingActionButtonComponent {
     /**
      * @hidden
      */
-    keyDownHandler(event) {
-        this.keyHandler(event);
+    pointerdownHandler(e) {
+        if (this.isOpen) {
+            e.preventDefault();
+            this.focus();
+        }
     }
     /**
      * @hidden
      */
-    keyHandler(event, keyEvent) {
+    keyDownHandler(event) {
         if (this.disabled) {
             return;
         }
@@ -4880,7 +4889,6 @@ class FloatingActionButtonComponent {
             altKey: event.altKey,
             current: focused,
             keyCode,
-            keyEvent: keyEvent,
             max: this.dialItems ? this.dialItems.length - 1 : 0,
             min: 0,
             flipNavigation: this.align.vertical === 'bottom'
@@ -4888,6 +4896,9 @@ class FloatingActionButtonComponent {
         if (action !== NavigationAction.Undefined && action !== NavigationAction.Tab) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && event.target.closest(`#${this.dialListId}`)) {
+            this.focus();
+        }
         if (action === NavigationAction.EnterUp && !this.hasDialItems) {
             this.button.nativeElement.click();
         }
@@ -4913,17 +4924,66 @@ class FloatingActionButtonComponent {
      * @hidden
      */
     focusHandler() {
-        if (!this.disabled) {
+        if (!this.disabled && !this.focusChangedProgrammatically) {
             this.onFocus.emit();
         }
     }
     /**
      * @hidden
      */
-    blurHandler() {
-        this.onBlur.emit();
+    blurHandler(e) {
+        const focusInList = e.relatedTarget && (e.relatedTarget.closest(`#${this.dialListId}`));
+        if (focusInList) {
+            return;
+        }
+        !this.focusChangedProgrammatically && this.onBlur.emit();
         this.toggleDialWithEvents(false);
     }
+    /**
+     * @hidden
+     */
+    focusOutHandler(e) {
+        const focusInList = e.relatedTarget && (e.relatedTarget.closest(`#${this.dialListId}`));
+        const focusOnButton = e.relatedTarget === this.button.nativeElement;
+        const shouldClose = !focusInList && !focusOnButton;
+        if (shouldClose) {
+            this.toggleDialWithEvents(false);
+            !this.focusChangedProgrammatically && this.onBlur.emit();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onNavigationEnterPress() {
+        this.ngZone.run(() => {
+            if (this.isOpen) {
+                const focusedIndex = this.focusService.focused;
+                const focusedItem = this.dialItems[focusedIndex];
+                if (focusedItem && focusedItem.disabled) {
+                    return;
+                }
+                if (isPresent(focusedIndex) && focusedIndex !== -1) {
+                    this.onEnterPressed();
+                    return;
+                }
+            }
+            if (!this.isOpen && isDocumentAvailable()) {
+                this.toggleDialWithEvents(true);
+                this.focus();
+            }
+        });
+    }
+    /**
+     * @hidden
+     */
+    onNavigationClose() {
+        if (this.isOpen) {
+            this.ngZone.run(() => {
+                this.toggleDialWithEvents(false);
+                this.focus();
+            });
+        }
+    }
     handleClasses(inputValue, input) {
         if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
@@ -4955,6 +5015,7 @@ class FloatingActionButtonComponent {
             this.toggleDialWithEvents(false);
             this.focusService.focused = index;
         }
+        this.focus();
     }
     subscribeNavigationEvents() {
         this.subscriptions.add(this.navigationService.navigate.subscribe(this.onArrowKeyNavigate.bind(this)));
@@ -4964,35 +5025,6 @@ class FloatingActionButtonComponent {
     onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
-    onNavigationEnterPress() {
-        this.ngZone.run(() => {
-            if (this.isOpen) {
-                const focusedIndex = this.focusService.focused;
-                const focusedItem = this.dialItems[focusedIndex];
-                if (focusedItem && focusedItem.disabled) {
-                    return;
-                }
-                if (isPresent(focusedIndex) && focusedIndex !== -1) {
-                    this.onEnterPressed();
-                    return;
-                }
-            }
-            if (!this.isOpen && isDocumentAvailable()) {
-                this.toggleDialWithEvents(true);
-                this.button.nativeElement.focus();
-            }
-        });
-    }
-    onNavigationClose() {
-        if (this.isOpen) {
-            this.ngZone.run(() => {
-                this.toggleDialWithEvents(false);
-                if (isDocumentAvailable()) {
-                    this.button.nativeElement.focus();
-                }
-            });
-        }
-    }
     alignClass() {
         return `k-pos-${this.align.vertical}-${this.align.horizontal}`;
     }
@@ -5070,6 +5102,7 @@ class FloatingActionButtonComponent {
             this.closePopup();
         }
         this.renderer.setAttribute(this.button.nativeElement, 'aria-expanded', 'false');
+        this.focusService.resetFocus();
     }
     isValidAnimation() {
         const animation = this.dialItemAnimation;
@@ -5215,10 +5248,11 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
-            (blur)="blurHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
-                click: clickHandler
+                click: clickHandler,
+                pointerdown: pointerdownHandler
             }"
             [scope]="this"
         >
@@ -5249,6 +5283,10 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
                 [align]="align"
                 [attr.aria-labelledby]="id"
                 (click)="onItemClick($event)"
+                [kendoEventsOutsideAngular]="{
+                    keydown: keyDownHandler.bind(this),
+                    focusout: focusOutHandler.bind(this)
+                }"
             >
             </ul>
         </ng-template>
@@ -5282,10 +5320,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [attr.aria-haspopup]="ariaHasPopup"
             [attr.aria-controls]="ariaControls"
             (focus)="focusHandler()"
-            (blur)="blurHandler()"
+            (blur)="blurHandler($event)"
             [kendoEventsOutsideAngular]="{
                 keydown: keyDownHandler,
-                click: clickHandler
+                click: clickHandler,
+                pointerdown: pointerdownHandler
             }"
             [scope]="this"
         >
@@ -5316,6 +5355,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 [align]="align"
                 [attr.aria-labelledby]="id"
                 (click)="onItemClick($event)"
+                [kendoEventsOutsideAngular]="{
+                    keydown: keyDownHandler.bind(this),
+                    focusout: focusOutHandler.bind(this)
+                }"
             >
             </ul>
         </ng-template>

package/floatingactionbutton/floatingactionbutton.component.d.ts

@@ -7,7 +7,6 @@ import { AfterViewInit, ElementRef, EventEmitter, NgZone, Renderer2, OnDestroy,
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { FocusService } from '../focusable/focus.service';
-import { KeyEvents } from '../navigation/key-events';
 import { NavigationService } from '../navigation/navigation.service';
 import { FabAlign } from './models/align';
 import { FabOffset } from './models/offset';
@@ -222,6 +221,7 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
     private animationEnd;
     private popupRef;
     private initialSetup;
+    private focusChangedProgrammatically;
     constructor(renderer: Renderer2, element: ElementRef, focusService: FocusService, navigationService: NavigationService, ngZone: NgZone, popupService: PopupService, builder: AnimationBuilder, localizationService: LocalizationService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -269,11 +269,11 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
     /**
      * @hidden
      */
-    keyDownHandler(event: any): void;
+    pointerdownHandler(e: PointerEvent): void;
     /**
      * @hidden
      */
-    keyHandler(event: KeyboardEvent, keyEvent?: KeyEvents): void;
+    keyDownHandler(event: any): void;
     /**
      * @hidden
      */
@@ -285,14 +285,24 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
     /**
      * @hidden
      */
-    blurHandler(): void;
+    blurHandler(e: FocusEvent): void;
+    /**
+     * @hidden
+     */
+    focusOutHandler(e: FocusEvent): void;
+    /**
+     * @hidden
+     */
+    onNavigationEnterPress(): void;
+    /**
+     * @hidden
+     */
+    onNavigationClose(): void;
     private handleClasses;
     private onEnterPressed;
     private emitItemClick;
     private subscribeNavigationEvents;
     private onArrowKeyNavigate;
-    private onNavigationEnterPress;
-    private onNavigationClose;
     private alignClass;
     private toggleDialWithEvents;
     private openPopup;

package/package.json

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