We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can't put a space in an input on tab header

Hi,


I have an input in the header of a tab, but it's impossible to put a space in this input.

I think there an input on the Tab Header but I didn't succeed to remove it ( https://www.syncfusion.com/forums/157543/cant-put-empty-space-on-any-field-when-use-inside-dropdown-button  ).


Thanks


5 Replies

SR Swathi Ravi Syncfusion Team December 19, 2022 09:15 AM UTC

Hi Aurelien,


Could you please share the use case scenario of the requirement to render the input elements inside the tab header?


Regards,

Swathi Ravi



AU Aurelien December 20, 2022 10:13 AM UTC

Hi,


It's just a simple input type text in the header, like in the first tab of this example:  ej2-angular-tab-wizard-sample (forked) - StackBlitz


Aurelien.



SR Swathi Ravi Syncfusion Team December 21, 2022 10:38 AM UTC

Aurelien, You can resolve this problem by calling the stopPropagation method on the input element event handler as shown in the below snippet.


Sample: https://stackblitz.com/edit/ej2-angular-tab-wizard-sample-zghvjs?file=app.component.ts


[app.component.html]

  <ng-template #headerText>

            <input type="text" (keydown)="onEvent($event)"/>

  </ng-template>


[app.component.ts]

 export class AppComponent {

onEvent(event) {

        event.stopPropagation();

    }

}




AU Aurelien December 21, 2022 01:58 PM UTC

Works great, thanks



RV Ravikumar Venkatesan Syncfusion Team December 22, 2022 03:17 PM UTC

You're welcome! Please get back to us if you need any further assistance.


Loader.
Live Chat Icon For mobile
Up arrow icon