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

resolves #27675

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');
+  });
+});