Feat: uui-input-lock: Only focus input when unlocked (#1096)

* implement tabIndex for input

* prevent tabbing into input when locked

Author: nielslyngsoe

packages/uui-input-lock/lib/uui-input-lock.element.ts

@@ -22,11 +22,37 @@ export class UUIInputLockElement extends UUIInputElement {
    * @default true
    */
   @property({ type: Boolean, reflect: true })
-  public locked: boolean = true;
+  public set locked(lock: boolean) {
+    this.#locked = lock;
+    this.tabIndex = lock ? -1 : 0;
+  }
+  public get locked(): boolean {
+    return this.#locked;
+  }
+  #locked: boolean = true;
+
+  /**
+   * Define the label for the unlock button.
+   * @type {string}
+   * @attr
+   * @default true
+   */
+  @property({ type: String, reflect: false, attribute: 'unlock-label' })
+  public unlockLabel: string = 'Unlock input';
+
+  /**
+   * Define the label for the lock button.
+   * @type {string}
+   * @attr
+   * @default true
+   */
+  @property({ type: String, reflect: false, attribute: 'lock-label' })
+  public lockLabel: string = 'Lock input';
 
   constructor() {
     super();
     this.readonly = true;
+    this.tabIndex = -1;
   }
 
   connectedCallback(): void {
@@ -40,6 +66,9 @@ export class UUIInputLockElement extends UUIInputElement {
     this.readonly = this.locked = !this.locked;
     this.pristine = false;
     this.dispatchEvent(new UUIInputLockEvent(UUIInputLockEvent.LOCK_CHANGE));
+    if (!this.locked) {
+      this._input?.focus();
+    }
   }
 
   renderIcon() {
@@ -56,7 +85,7 @@ export class UUIInputLockElement extends UUIInputElement {
       @click=${this._onLockToggle}
       compact
       id="lock"
-      label="${this.locked ? 'Unlock input' : 'Lock input'}">
+      label="${this.locked ? this.unlockLabel : this.lockLabel}">
       ${this.renderIcon()}
     </uui-button>`;
   }

packages/uui-input/lib/uui-input.element.ts

@@ -214,6 +214,14 @@ export class UUIInputElement extends UUIFormControlMixin(
   @property({ type: String })
   pattern?: string;
 
+  /**
+   * Set the input tabindex, set this to `-1` to avoid tabbing into the input.
+   * @type {number}
+   * @attr
+   */
+  @property({ type: Number, reflect: false, attribute: 'tabindex' })
+  tabIndex: number = 0;
+
   @query('#input')
   _input!: HTMLInputElement;
 
@@ -349,6 +357,7 @@ export class UUIInputElement extends UUIFormControlMixin(
       ?autofocus=${this.autofocus}
       ?required=${this.required}
       ?readonly=${this.readonly}
+      tabindex=${ifDefined(this.tabIndex)}
       @input=${this.onInput}
       @change=${this.onChange} />`;
   }