TabStripTab input required

5 posts, 1 answers
  1. Matjaz Reberc
    Matjaz Reberc avatar
    3 posts
    Member since:
    Oct 2020

    Posted 17 Feb Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 17 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Matjaz Reberc
    Matjaz Reberc avatar
    3 posts
    Member since:
    Oct 2020

    Posted 18 Feb in reply to Stefan Link to this post

    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
  4. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 18 Feb Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  5. Matjaz Reberc
    Matjaz Reberc avatar
    3 posts
    Member since:
    Oct 2020

    Posted 18 Feb in reply to Stefan Link to this post

    Hello Stefan,

    i did vote.

    Thank you, Matjaz Reberc
Back to Top