fix(input): Removed overriden tabIndex property (#1836)

Author: rkaraivanov

src/components/common/util.ts

@@ -1,4 +1,4 @@
-import { isServer } from 'lit';
+import { isServer, nothing } from 'lit';
 
 export const asPercent = (part: number, whole: number) => (part / whole) * 100;
 
@@ -581,3 +581,13 @@ export function toMerged<
 >(target: T, source: S): T & S {
   return merge(structuredClone(target), source);
 }
+
+/**
+ * Similar to Lit's `ifDefined` directive except one can check `assertion`
+ * and bind a different `value` through this wrapper.
+ */
+export function bindIf<T>(assertion: unknown, value: T): NonNullable<T> {
+  return assertion
+    ? (value ?? (nothing as NonNullable<T>))
+    : (nothing as NonNullable<T>);
+}

src/components/file-input/file-input.ts

@@ -1,6 +1,5 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
@@ -10,7 +9,7 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormValueFileListTransformers } from '../common/mixins/forms/form-transformers.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
+import { bindIf, isEmpty } from '../common/util.js';
 import {
   IgcInputBaseComponent,
   type IgcInputComponentEventMap,
@@ -126,12 +125,6 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
   @property({ type: Boolean })
   public override autofocus!: boolean;
 
-  /**
-   * @internal
-   */
-  @property({ type: Number })
-  public override tabIndex = 0;
-
   /** @hidden */
   @property({ type: Boolean, attribute: false, noAccessor: true })
   public override readonly readOnly = false;
@@ -208,6 +201,9 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
   }
 
   protected renderInput() {
+    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
+    const hasHelperText = !isEmpty(this._helperText);
+
     return html`
       <input
         id=${this.inputId}
@@ -217,11 +213,9 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
         ?required=${this.required}
         ?autofocus=${this.autofocus}
         ?multiple=${this.multiple}
-        tabindex=${this.tabIndex}
-        accept=${ifDefined(this.accept === '' ? undefined : this.accept)}
-        aria-describedby=${ifDefined(
-          isEmpty(this._helperText) ? nothing : 'helper-text'
-        )}
+        tabindex=${bindIf(hasNegativeTabIndex, -1)}
+        accept=${bindIf(this.accept, this.accept)}
+        aria-describedby=${bindIf(hasHelperText, 'helper-text')}
         @click=${this._handleClick}
         @change=${this._handleChange}
         @cancel=${this._handleCancel}

src/components/input/input.ts

@@ -1,12 +1,12 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 
 import { registerComponent } from '../common/definitions/register.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
+import { bindIf, isEmpty } from '../common/util.js';
 import type { InputType, RangeTextSelectMode } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcInputBaseComponent } from './input-base.js';
@@ -199,12 +199,6 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
   @property({ type: Boolean, reflect: true, attribute: 'validate-only' })
   public validateOnly = false;
 
-  /**
-   * @internal
-   */
-  @property({ type: Number })
-  public override tabIndex = 0;
-
   /* blazorSuppress */
   /** Replaces the selected text in the input. */
   public override setRangeText(
@@ -247,6 +241,9 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
   }
 
   protected renderInput() {
+    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
+    const hasHelperText = !isEmpty(this._helperText);
+
     return html`
       <input
         id=${this.inputId}
@@ -260,17 +257,15 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
         ?disabled=${this.disabled}
         ?required=${this.required}
         ?autofocus=${this.autofocus}
-        tabindex=${this.tabIndex}
+        tabindex=${bindIf(hasNegativeTabIndex, -1)}
         autocomplete=${ifDefined(this.autocomplete as any)}
         inputmode=${ifDefined(this.inputMode)}
-        min=${ifDefined(this.validateOnly ? undefined : this.min)}
-        max=${ifDefined(this.validateOnly ? undefined : this.max)}
+        min=${bindIf(!this.validateOnly, this.min)}
+        max=${bindIf(!this.validateOnly, this.max)}
         minlength=${ifDefined(this.minLength)}
-        maxlength=${ifDefined(this.validateOnly ? undefined : this.maxLength)}
+        maxlength=${bindIf(!this.validateOnly, this.maxLength)}
         step=${ifDefined(this.step)}
-        aria-describedby=${ifDefined(
-          isEmpty(this._helperText) ? nothing : 'helper-text'
-        )}
+        aria-describedby=${bindIf(hasHelperText, 'helper-text')}
         @change=${this.handleChange}
         @input=${this.handleInput}
         @blur=${this._handleBlur}

src/components/select/select.ts

@@ -663,7 +663,6 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
         aria-describedby="select-helper-text"
         aria-expanded=${this.open}
         exportparts="container: input, input: native-input, label, prefix, suffix"
-        tabIndex=${this.disabled ? -1 : 0}
         value=${ifDefined(value)}
         placeholder=${ifDefined(this.placeholder)}
         label=${ifDefined(this.label)}