TabStripTab input required

[n/a]

Hello,

 

I have a form (not KendoReact Form), and in this form i have Input field and under this component a have TabStrip with TabStripTab's. Each TabStripTab has own Input components. Some components are Required some not. 

If i Click Submit button,  the required components in TabStripTab are ignored, if i don't write values in components that are in TabStrips.

 

Is there any way i can also "check" required components in TabStrip on Submiting Form?

 

Thank you, Matjaz Reberc

[Stefan]

Hello, Matjaz,

This may occur if the TabStripTabs are unmounted.

Please check if keeping them mounted will resolve the issue:

https://www.telerik.com/kendo-react-ui/components/layout/api/TabStripProps/#toc-keeptabsmounted

If the issue still, occurs please share an example as it could be connected with the Form logic not accessing the Inputs.

Regards,
Stefan
Progress Telerik

[n/a]

Hallo Stefan,

I dit try „keepTabsMounted“, but the problem was i had to select this tab bevor i submitet the form, then it worked

Example. Let sey I have a Form with 2 Tabs. First Tab dose not have required component, the second has it.
If I dont click on second Tab and i only clik submit button then the form will be submited.

If I click on second Tab and then first Tab, and Submit button, then the Form will not be submited.

My Form:

<form onSubmit={this.handleSubmit}>

               <TabStrip selected={this.state.selected} onSelect={this.handleSelect} keepTabsMounted={true}>
                             <TabStripTab>
                                             <Input  />
                              </TabStripTab>
                              <TabStripTab>
                                             <Input required={true} />
                              </TabStripTab>
                </TabStrip>
                 <div>
<Button type={'submit'} id={'submitButton'}>Submit</Button>
  </div>
 </form>

Thank you, Matjaz Reberc

[Stefan]

Hello, Matjaz

Thank you for the confirmation.

This occurs as the tabs are rendered when they are opened. In this case, the tab is never rendered and the input is never rendered as well.

We have a request to provide an option to render all tabs initially. Please vote for it as this will increase its chances to be implemented sooner:

https://feedback.telerik.com/kendo-react-ui/1453789-preload-tabstriptabs-in-tabstrip-control

Regards,
Stefan
Progress Telerik

[n/a]

Hello Stefan,

i did vote.

Thank you, Matjaz Reberc