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

[Aurelien]

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

[Swathi Ravi]

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

[Aurelien]

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.

[Swathi Ravi]

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();

    }

}

[Aurelien]

Works great, thanks

[Ravikumar Venkatesan]

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