-
Notifications
You must be signed in to change notification settings - Fork 75
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(input, input-number, input-text): restore autofocus
, enter-key-mode
and input-mode
attributes
#9245
fix(input, input-number, input-text): restore autofocus
, enter-key-mode
and input-mode
attributes
#9245
Conversation
…nput-mode` attributes This was caused by the removal of custom props mapped to global attributes, which were kebab-cased through Stencil attr reflection rules.
enter-key-mode
and input-mode
attributesautofocus
, enter-key-mode
and input-mode
attributes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! 👏
@@ -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")} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks a little odd to me because you could just do
enterKeyHint={this.enterKeyHint}
But I get why its like the way you have. So its easier to remove the property in the future breaking change release 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is actually needed since the component prop won't be populated if I set the global attribute. The custom props override the native behavior, so the prop will not be set when using the native global attributes.
enterKeyHint={this.el.enterKeyHint} | ||
inputMode={this.el.inputMode} | ||
enterKeyHint={enterKeyHint} | ||
inputMode={inputMode} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah this makes more sense. We'll just have to put the previous code back once we remove the internal props.
…-mode` and `input-mode` attributes (#9245) **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 ionic-team/stencil#5726).
…-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 ionic-team/stencil#5726). Co-authored-by: Ben Elan <no-reply@benelan.dev>
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 2.8.1</summary> ## [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.0...@esri/calcite-components@2.8.1) (2024-05-14) ### Bug Fixes * Add type-fest as dependency due to build error ([3819688](3819688)) * **carousel:** Animate items with the same direction ([#9325](#9325)) ([6bf7b74](6bf7b74)) * **input, input-number, input-text:** Restore `autofocus`, `enter-key-mode` and `input-mode` attributes ([#9245](#9245)) ([#9306](#9306)) ([0498c6e](0498c6e)) * **list-item:** Decrease horizontal spacing between selection icon and content ([#9304](#9304)) ([0e828b6](0e828b6)) </details> <details><summary>@esri/calcite-components-angular: 2.8.1</summary> ## [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.0...@esri/calcite-components-angular@2.8.1) (2024-05-14) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1 </details> <details><summary>@esri/calcite-components-react: 2.8.1</summary> ## [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.0...@esri/calcite-components-react@2.8.1) (2024-05-14) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 2.8.1</summary> [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.0...@esri/calcite-components@2.8.1) (2024-05-14) * Add type-fest as dependency due to build error ([3819688](3819688)) * **carousel:** Animate items with the same direction ([#9325](#9325)) ([6bf7b74](6bf7b74)) * **input, input-number, input-text:** Restore `autofocus`, `enter-key-mode` and `input-mode` attributes ([#9245](#9245)) ([#9306](#9306)) ([0498c6e](0498c6e)) * **list-item:** Decrease horizontal spacing between selection icon and content ([#9304](#9304)) ([0e828b6](0e828b6)) </details> <details><summary>@esri/calcite-components-angular: 2.8.1</summary> [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.0...@esri/calcite-components-angular@2.8.1) (2024-05-14) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1 </details> <details><summary>@esri/calcite-components-react: 2.8.1</summary> [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.0...@esri/calcite-components-react@2.8.1) (2024-05-14) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 2.8.1</summary> [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.8.0...@esri/calcite-components@2.8.1) (2024-05-14) * Add type-fest as dependency due to build error ([3819688](3819688)) * **carousel:** Animate items with the same direction ([#9325](#9325)) ([6bf7b74](6bf7b74)) * **input, input-number, input-text:** Restore `autofocus`, `enter-key-mode` and `input-mode` attributes ([#9245](#9245)) ([#9306](#9306)) ([0498c6e](0498c6e)) * **list-item:** Decrease horizontal spacing between selection icon and content ([#9304](#9304)) ([0e828b6](0e828b6)) </details> <details><summary>@esri/calcite-components-angular: 2.8.1</summary> [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.8.0...@esri/calcite-components-angular@2.8.1) (2024-05-14) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1 </details> <details><summary>@esri/calcite-components-react: 2.8.1</summary> [2.8.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.8.0...@esri/calcite-components-react@2.8.1) (2024-05-14) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.1-hotfix.0 to ^2.8.1 </details> --- This PR was generated with [ReleasePlease](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: Calcite Admin <calcite-admin@esri.com>
Related Issue: #9235
Summary
This fixes the following issues introduced by #9123 when component props that shadowed global attributes were removed:
enter-key-mode
,input-mode
)autofocus
was missing from component types as Stencil does not include it in the baseHTMLAttribute
type (see bug:autofocus
prop/attr is defined on other HTML attribute types instead ofHTMLAttributes
ionic-team/stencil#5726).