diff --git a/core/api.txt b/core/api.txt index eecee0c71f..55ace969a9 100644 --- a/core/api.txt +++ b/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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 24f42a4887..0b839d4ee7 100644 --- a/core/src/components.d.ts +++ b/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 `` would become `<Ionic>` 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. */ diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 5a432c065d..c2e44fa5e0 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -27,6 +27,7 @@ export class Searchbar implements ComponentInterface { private isCancelVisible = false; private shouldAlignLeft = true; private originalIonInput?: EventEmitter; + 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; diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html index 7e607a4f1a..257339f6e8 100644 --- a/core/src/components/searchbar/test/basic/index.html +++ b/core/src/components/searchbar/test/basic/index.html @@ -106,6 +106,9 @@ > +
Search - Name
+ +
Toggle Property
diff --git a/core/src/components/searchbar/test/searchbar.spec.ts b/core/src/components/searchbar/test/searchbar.spec.ts new file mode 100644 index 0000000000..36731dac06 --- /dev/null +++ b/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: '', + }); + + const nativeEl = page.body.querySelector('ion-searchbar input'); + expect(nativeEl.getAttribute('name')).toBe('search'); + }); +}); diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index a5b24309ea..7429a4cc60 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/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: '', // 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; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 23131fb7bc..5e134feb16 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -681,6 +681,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer