fix(searchbar): autocapitalize is initialized correctly

core/api.txt

@@ -1158,7 +1158,7 @@ ion-row,shadow
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
-ion-searchbar,prop,autocapitalize,string,undefined,true,false
+ion-searchbar,prop,autocapitalize,string,'default',false,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false

core/src/components.d.ts

@@ -7295,7 +7295,7 @@ declare namespace LocalJSX {
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          */
-        "autocapitalize": string;
+        "autocapitalize"?: string;
         /**
           * Set the input's autocomplete property.
          */

core/src/components/searchbar/searchbar.tsx

@@ -84,20 +84,19 @@ export class Searchbar implements ComponentInterface {
    * and disabled by default on Android
    * for Searchbar. The autocapitalize type on HTMLElement
    * requires that it be a string and never undefined.
-   * However, setting it to a string value would be a breaking change
-   * in behavior, so we use "!" to tell TypeScript that this property
-   * is always defined so we can rely on the browser defaults. Browsers
-   * will automatically set a default value if the developer does not set one.
+   * However, setting it to one of the accepted values would be a breaking change
+   * in behavior, so we use the internal "default" keyword to ensure
+   * we use the default browser behavior for now.
    *
    * In the future, this property will default to "off" to align with
-   * Input and Textarea, and the "!" will not be needed.
+   * Input and Textarea, and the internal "default" keyword will not be needed.
    */
 
   /**
    * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
    * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
    */
-  @Prop() autocapitalize!: string;
+  @Prop() autocapitalize: string = 'default';
 
   /**
    * Set the input's autocomplete property.
@@ -621,7 +620,7 @@ export class Searchbar implements ComponentInterface {
   }
 
   render() {
-    const { cancelButtonText } = this;
+    const { cancelButtonText, autocapitalize } = this;
     const animated = this.animated && config.getBoolean('animated', true);
     const mode = getIonMode(this);
     const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
@@ -683,7 +682,7 @@ export class Searchbar implements ComponentInterface {
             placeholder={this.placeholder}
             type={this.type}
             value={this.getValue()}
-            autoCapitalize={this.autocapitalize}
+            autoCapitalize={autocapitalize === 'default' ? undefined : autocapitalize}
             autoComplete={this.autocomplete}
             autoCorrect={this.autocorrect}
             spellcheck={this.spellcheck}