fix(input, input-number, input-text): restore autofocus, enter-key-mode and input-mode attributes (#9245) (#9306)

**Related Issue:** #9235

## Summary

This fixes the following issues introduced by #9123 when component props
that shadowed global attributes were removed:

* the kebab-cased attribute names of those props would no longer work
(namely, `enter-key-mode`, `input-mode`)
* `autofocus` was missing from component types as Stencil does not
include it in the base `HTMLAttribute` type (see
stenciljs/core#5726).

Co-authored-by: Ben Elan <[email protected]>

Author: jcfranco

packages/calcite-components/src/components.d.ts

@@ -2034,6 +2034,10 @@ export namespace Components {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete": string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+         */
+        "autofocus": boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
          */
@@ -2044,6 +2048,11 @@ export namespace Components {
          */
         "disabled": boolean;
         "editingEnabled": boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "enterKeyHint": string;
         /**
           * When `type` is `"file"`, specifies the component's selected files.
           * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
@@ -2065,6 +2074,11 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "inputMode": string;
         /**
           * Accessible name for the component.
          */
@@ -2364,6 +2378,10 @@ export namespace Components {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete": string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+         */
+        "autofocus": boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value.
          */
@@ -2374,6 +2392,11 @@ export namespace Components {
          */
         "disabled": boolean;
         "editingEnabled": boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "enterKeyHint": string;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -2391,6 +2414,11 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "inputMode": string;
         /**
           * When `true`, restricts the component to integer numbers only and disables exponential notation.
          */
@@ -2522,6 +2550,10 @@ export namespace Components {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete": string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+         */
+        "autofocus": boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value.
          */
@@ -2532,6 +2564,11 @@ export namespace Components {
          */
         "disabled": boolean;
         "editingEnabled": boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "enterKeyHint": string;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -2545,6 +2582,11 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "inputMode": string;
         /**
           * Accessible name for the component's button or hyperlink.
          */
@@ -9748,6 +9790,10 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete"?: string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+         */
+        "autofocus"?: boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
          */
@@ -9758,6 +9804,11 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         "editingEnabled"?: boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "enterKeyHint"?: string;
         /**
           * When `type` is `"file"`, specifies the component's selected files.
           * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
@@ -9779,6 +9830,11 @@ declare namespace LocalJSX {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl"?: boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "inputMode"?: string;
         /**
           * Accessible name for the component.
          */
@@ -10091,6 +10147,10 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete"?: string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+         */
+        "autofocus"?: boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value.
          */
@@ -10101,6 +10161,11 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         "editingEnabled"?: boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "enterKeyHint"?: string;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -10118,6 +10183,11 @@ declare namespace LocalJSX {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl"?: boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "inputMode"?: string;
         /**
           * When `true`, restricts the component to integer numbers only and disables exponential notation.
          */
@@ -10251,6 +10321,10 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete"?: string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+         */
+        "autofocus"?: boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value.
          */
@@ -10261,6 +10335,11 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         "editingEnabled"?: boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "enterKeyHint"?: string;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -10274,6 +10353,11 @@ declare namespace LocalJSX {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl"?: boolean;
+        /**
+          * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+          * @futureBreaking kebab-cased attribute will not be supported in a future release
+         */
+        "inputMode"?: string;
         /**
           * Accessible name for the component's button or hyperlink.
          */

packages/calcite-components/src/components/input-number/input-number.e2e.ts

@@ -15,7 +15,11 @@ import {
 import { getElementRect, getElementXY, selectText } from "../../tests/utils";
 import { letterKeys, numberKeys } from "../../utils/key";
 import { locales, numberStringFormatter } from "../../utils/locale";
-import { testHiddenInputSyncing, testPostValidationFocusing } from "../input/common/tests";
+import {
+  testWorkaroundForGlobalPropRemoval,
+  testHiddenInputSyncing,
+  testPostValidationFocusing,
+} from "../input/common/tests";
 
 describe("calcite-input-number", () => {
   const delayFor2UpdatesInMs = 200;
@@ -1757,6 +1761,8 @@ describe("calcite-input-number", () => {
     testHiddenInputSyncing("calcite-input-number");
   });
 
+  testWorkaroundForGlobalPropRemoval("calcite-input-number");
+
   describe("translation support", () => {
     t9n("calcite-input-number");
   });

packages/calcite-components/src/components/input-number/input-number.tsx

@@ -119,6 +119,14 @@ export class InputNumber
   /** Specifies the text alignment of the component's value. */
   @Prop({ reflect: true }) alignment: Extract<"start" | "end", Alignment> = "start";
 
+  /**
+   * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/reserved-member-names
+  @Prop() autofocus: boolean;
+
   /**
    * When `true`, a clear button is displayed when the component has a value.
    */
@@ -136,6 +144,15 @@ export class InputNumber
     this.setDisabledAction();
   }
 
+  /**
+   * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+   *
+   * @futureBreaking kebab-cased attribute will not be supported in a future release
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/reserved-member-names
+  @Prop() enterKeyHint: string;
+
   /**
    * The `id` of the form that will be associated with the component.
    *
@@ -158,6 +175,15 @@ export class InputNumber
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
+  /**
+   * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+   *
+   * @futureBreaking kebab-cased attribute will not be supported in a future release
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/reserved-member-names
+  @Prop() inputMode: string;
+
   /** When `true`, restricts the component to integer numbers only and disables exponential notation. */
   @Prop() integer = false;
 
@@ -1059,8 +1085,8 @@ export class InputNumber
         autofocus={this.el.autofocus ? true : null}
         defaultValue={this.defaultValue}
         disabled={this.disabled ? true : null}
-        enterKeyHint={this.el.enterKeyHint}
-        inputMode={this.el.inputMode}
+        enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")}
+        inputMode={this.el.inputMode || this.el.getAttribute("inputmode")}
         key="localized-input"
         maxLength={this.maxLength}
         minLength={this.minLength}

packages/calcite-components/src/components/input-text/input-text.e2e.ts

@@ -12,7 +12,11 @@ import {
   t9n,
 } from "../../tests/commonTests";
 import { selectText } from "../../tests/utils";
-import { testHiddenInputSyncing, testPostValidationFocusing } from "../input/common/tests";
+import {
+  testHiddenInputSyncing,
+  testPostValidationFocusing,
+  testWorkaroundForGlobalPropRemoval,
+} from "../input/common/tests";
 
 describe("calcite-input-text", () => {
   describe("labelable", () => {
@@ -469,6 +473,8 @@ describe("calcite-input-text", () => {
     testHiddenInputSyncing("calcite-input-text");
   });
 
+  testWorkaroundForGlobalPropRemoval("calcite-input-text");
+
   describe("translation support", () => {
     t9n("calcite-input-text");
   });

packages/calcite-components/src/components/input-text/input-text.tsx

@@ -95,6 +95,14 @@ export class InputText
   /** Specifies the text alignment of the component's value. */
   @Prop({ reflect: true }) alignment: Extract<"start" | "end", Alignment> = "start";
 
+  /**
+   * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/reserved-member-names
+  @Prop() autofocus: boolean;
+
   /**
    * When `true`, a clear button is displayed when the component has a value.
    */
@@ -112,6 +120,15 @@ export class InputText
     this.setDisabledAction();
   }
 
+  /**
+   * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+   *
+   * @futureBreaking kebab-cased attribute will not be supported in a future release
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/reserved-member-names
+  @Prop() enterKeyHint: string;
+
   /**
    * The `id` of the form that will be associated with the component.
    *
@@ -130,6 +147,15 @@ export class InputText
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
+  /**
+   * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123
+   *
+   * @futureBreaking kebab-cased attribute will not be supported in a future release
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/reserved-member-names
+  @Prop() inputMode: string;
+
   /** Accessible name for the component's button or hyperlink. */
   @Prop() label: string;
 
@@ -632,7 +658,6 @@ export class InputText
       />
     );
     const prefixText = <div class={CSS.prefix}>{this.prefixText}</div>;
-
     const suffixText = <div class={CSS.suffix}>{this.suffixText}</div>;
 
     const childEl = (
@@ -646,8 +671,8 @@ export class InputText
         }}
         defaultValue={this.defaultValue}
         disabled={this.disabled ? true : null}
-        enterKeyHint={this.el.enterKeyHint}
-        inputMode={this.el.inputMode}
+        enterKeyHint={this.el.enterKeyHint || this.el.getAttribute("enterkeyhint")}
+        inputMode={this.el.inputMode || this.el.getAttribute("inputmode")}
         maxLength={this.maxLength}
         minLength={this.minLength}
         name={this.name}