feat(searchbar): add name property (#27737)

resolves #27675

core/api.txt

@@ -1157,6 +1157,7 @@ ion-searchbar,prop,disabled,boolean,false,false,false
 ion-searchbar,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
+ion-searchbar,prop,name,string,this.inputId,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
 ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false

core/src/components.d.ts

@@ -2578,6 +2578,10 @@ export namespace Components {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * If used in a form, set the name of the control, which is submitted with the form data.
+         */
+        "name": string;
         /**
           * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          */
@@ -6625,6 +6629,10 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * If used in a form, set the name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
         /**
           * Emitted when the input loses focus.
          */

core/src/components/searchbar/searchbar.tsx

@@ -27,6 +27,7 @@ export class Searchbar implements ComponentInterface {
   private isCancelVisible = false;
   private shouldAlignLeft = true;
   private originalIonInput?: EventEmitter<SearchbarInputEventDetail>;
+  private inputId = `ion-searchbar-${searchbarIds++}`;
 
   /**
    * The value of the input when the textarea is focused.
@@ -111,6 +112,11 @@ export class Searchbar implements ComponentInterface {
    */
   @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
+  /**
+   * If used in a form, set the name of the control, which is submitted with the form data.
+   */
+  @Prop() name: string = this.inputId;
+
   /**
    * Set the input's placeholder.
    * `placeholder` can accept either plaintext or HTML as a string.
@@ -588,6 +594,7 @@ export class Searchbar implements ComponentInterface {
             class="searchbar-input"
             inputMode={this.inputmode}
             enterKeyHint={this.enterkeyhint}
+            name={this.name}
             onInput={this.onInput}
             onChange={this.onChange}
             onBlur={this.onBlur}
@@ -639,3 +646,5 @@ export class Searchbar implements ComponentInterface {
     );
   }
 }
+
+let searchbarIds = 0;

core/src/components/searchbar/test/basic/index.html

@@ -106,6 +106,9 @@
         >
         </ion-searchbar>
 
+        <h5 class="ion-padding-start ion-padding-top">Search - Name</h5>
+        <ion-searchbar name="search"> </ion-searchbar>
+
         <div class="ion-padding-horizontal">
           <ion-button expand="block" onClick="toggleProp()">Toggle Property</ion-button>
         </div>

core/src/components/searchbar/test/searchbar.spec.ts

@@ -0,0 +1,15 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Searchbar } from '../searchbar';
+
+describe('searchbar: rendering', () => {
+  it('should inherit attributes', async () => {
+    const page = await newSpecPage({
+      components: [Searchbar],
+      html: '<ion-searchbar name="search"></ion-searchbar>',
+    });
+
+    const nativeEl = page.body.querySelector('ion-searchbar input');
+    expect(nativeEl.getAttribute('name')).toBe('search');
+  });
+});

packages/angular/src/directives/proxies.ts

@@ -1843,7 +1843,7 @@ export declare interface IonRow extends Components.IonRow {}
 
 
 @ProxyCmp({
-  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
+  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
@@ -1851,7 +1851,7 @@ export declare interface IonRow extends Components.IonRow {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
+  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
 })
 export class IonSearchbar {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -681,6 +681,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
   'disabled',
   'inputmode',
   'enterkeyhint',
+  'name',
   'placeholder',
   'searchIcon',
   'showCancelButton',