bug: autocapitalize is required in IonSearchbar types #29193
Comments
|
Thanks for the report. This was an attempt to add As a workaround you can add |
liamdebeasi
added
package: core
|
Here's a dev build with a proposed fix if you are interested in testing: |
Issue number: resolves #29193 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In an attempt to preserve backwards compatibility when adding `autocapitalize` to Searchbar, we used `!` to indicate that the prop was never undefined. The `autocapitalize` on `HTMLElement` expects this value to be a string and never undefined. For the purposes of the property on Searchbar, setting this prop to one of the accepted values would constitute a breaking change because it would override the default browser behavior (which we previously relied upon). As a result, we used `!` to not set a default prop but inform TypeScript that this prop is always defined. This unintentionally made it so developers needed to define the `autocapitalize` property every time which is not what we want. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `autocapitalize` now defaults to the `'default'` keyword. This is an internal keyword that is used to tell Ionic to **not** set the `autocapitalize` attribute on the inner `input` element and instead rely on the default browser behavior. This satisfies the `HTMLElement` requirement that `autocapitalize` is never undefined. In Ionic 8 this `'default'` value will be replaced with `'off'`. [Typescript currently sets the `HTMLElement` `autocapitalize` type to `string`](https://github.com/microsoft/TypeScript/blob/65812bf3ec3b9208141ef46e43d146a2eef88ae5/src/lib/dom.generated.d.ts#L10087) which is why we can add a `'default'` keyword here. There is some risk that if these type definitions change in the future that applications may encounter errors. However, changing this on the TypeScript side would itself be a breaking change. Additionally, we are moving away from `'default'` in Ionic 8, so I think this is an acceptable amount of risk. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.8.2-dev.11711027016.13b2a920` Tested in a React starter app with Searchbar, and I verified this fix works.
|
Thanks for the issue. This has been resolved via #29197, and a fix will be available in an upcoming release of Ionic Framework. Feel free to keep testing the dev build, and let me know if you have any questions. |
|
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
Tried to upgrade to 7.8.1/8.0.0-beta.3, notice the following:
Expected Behavior
autocapitalizeis optionalSteps to Reproduce
Click repro see type error
Code Reproduction URL
https://stackblitz.com/edit/naskdu?file=src%2FApp.tsx,src%2Fmain.tsx
Ionic Info
N/A
Additional Information
No response
The text was updated successfully, but these errors were encountered: