@babylonjs/gui 7.16.0 → 7.17.0

package/2D/advancedDynamicTexture.d.ts

@@ -348,6 +348,7 @@ export declare class AdvancedDynamicTexture extends DynamicTexture {
     private _translateToPicking;
     /** Attach to all scene events required to support pointer events */
     attach(): void;
+    private _focusProperties;
     private _focusNextElement;
     /**
      * @internal

package/2D/advancedDynamicTexture.js

@@ -338,6 +338,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         // Invalidated rectangle which is the combination of all invalidated controls after they have been rotated into absolute position
         this._invalidatedRectangle = null;
         this._clearMeasure = new Measure(0, 0, 0, 0);
+        this._focusProperties = { index: 0, total: -1 };
         /**
          * @internal
          */
@@ -394,7 +395,15 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._preKeyboardObserver = scene.onPreKeyboardObservable.add((info) => {
             // check if tab is pressed
             if (!this.disableTabNavigation && info.type === KeyboardEventTypes.KEYDOWN && info.event.code === "Tab") {
-                this._focusNextElement(!info.event.shiftKey);
+                const forward = !info.event.shiftKey;
+                if ((forward && this._focusProperties.index === this._focusProperties.total - 1) ||
+                    (!forward && this._focusProperties.index === 0 && this._focusProperties.total > 0)) {
+                    this.focusedControl = null;
+                    this._focusProperties.index = 0;
+                    this._focusProperties.total = -1;
+                    return;
+                }
+                this._focusNextElement(forward);
                 info.event.preventDefault();
                 return;
             }
@@ -951,21 +960,24 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             // if tabIndex is 0, put it in the end of the list, otherwise sort by tabIndex
             return a.tabIndex === 0 ? 1 : b.tabIndex === 0 ? -1 : a.tabIndex - b.tabIndex;
         });
+        this._focusProperties.total = sortedTabbableControls.length;
         // if no control is focused, focus the first one
+        let nextIndex = -1;
         if (!this._focusedControl) {
-            sortedTabbableControls[0].focus();
+            nextIndex = forward ? 0 : sortedTabbableControls.length - 1;
         }
         else {
             const currentIndex = sortedTabbableControls.indexOf(this._focusedControl);
-            let nextIndex = currentIndex + (forward ? 1 : -1);
+            nextIndex = currentIndex + (forward ? 1 : -1);
             if (nextIndex < 0) {
                 nextIndex = sortedTabbableControls.length - 1;
             }
             else if (nextIndex >= sortedTabbableControls.length) {
                 nextIndex = 0;
             }
-            sortedTabbableControls[nextIndex].focus();
         }
+        sortedTabbableControls[nextIndex].focus();
+        this._focusProperties.index = nextIndex;
     }
     /**
      * Register the clipboard Events onto the canvas