Merge pull request #320 from rvsia/validateMuiTabs

Validate MUI hidden tabs

Author: Hyperkid123

packages/mui-component-mapper/src/form-fields/form-fields.js

@@ -56,6 +56,7 @@ const selectComponent = ({
       required={ isRequired }
       inputProps={{
         readOnly: isReadOnly,
+        required: false,
       }}
       { ...rest }
     />
@@ -73,6 +74,7 @@ const selectComponent = ({
       multiline
       inputProps={{
         readOnly: isReadOnly,
+        required: false,
       }}
       { ...rest }
     />

packages/mui-component-mapper/src/form-fields/tabs.js

@@ -1,11 +1,13 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 
 const renderTabHeader = items => items.map(({ title, key, name }) => <Tab key={ name } label={ title } />);
-const renderTabContet = ({ name, fields }, formOptions) => <Fragment key={ name }>{ formOptions.renderForm(fields, formOptions) }</Fragment>;
+const renderTabContet = (tabs, formOptions, activeTab) => tabs.map(({ fields, name }, idx) => (
+  <div key={ name } hidden={ idx !== activeTab }>{ formOptions.renderForm(fields, formOptions) }</div>
+));
 
 class FormTabs extends Component {
   state = {
@@ -24,7 +26,7 @@ class FormTabs extends Component {
             { renderTabHeader(fields) }
           </Tabs>
         </AppBar>
-        { renderTabContet(fields[activeTab], formOptions) }
+        { renderTabContet(fields, formOptions, activeTab) }
       </div>
     );
   }

packages/mui-component-mapper/src/tests/tabs.test.js

@@ -4,6 +4,8 @@ import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 
+import FormRenderer, { validatorTypes } from '@data-driven-forms/react-form-renderer';
+import { formFieldsMapper, layoutMapper } from '../index';
 import FormTabs from '../form-fields/tabs';
 
 describe('tabs', () => {
@@ -31,7 +33,7 @@ describe('tabs', () => {
     expect(wrapper.find(AppBar)).toHaveLength(1);
     expect(wrapper.find(Tabs)).toHaveLength(1);
     expect(wrapper.find(Tab)).toHaveLength(2);
-    expect(wrapper.find('h1')).toHaveLength(1);
+    expect(wrapper.find('h1')).toHaveLength(2);
   });
 
   it('should switch tabs correctly', () => {
@@ -43,4 +45,50 @@ describe('tabs', () => {
 
     expect(wrapper.instance().state.activeTab).toEqual(1);
   });
+
+  it('validate all tabs', () => {
+    const onSubmit = jest.fn();
+    const wrapper = mount(<FormRenderer
+      formFieldsMapper={ formFieldsMapper }
+      layoutMapper={ layoutMapper }
+      onSubmit={ (values) => onSubmit(values) }
+      schema={{ fields: [{
+        component: 'tabs',
+        name: 'tabs1',
+        title: 'tabs1',
+        fields: [{
+          name: 'tabitem1',
+          component: 'tab-item',
+          fields: [{
+            component: 'text-field',
+            name: 'name',
+            validate: [{ type: validatorTypes.REQUIRED }],
+          }],
+        }, {
+          name: 'tabitem2',
+          component: 'tab-item',
+          fields: [{
+            component: 'text-field',
+            name: 'password',
+            validate: [{ type: validatorTypes.REQUIRED }],
+          }],
+        }],
+      }]}}
+    />);
+
+    wrapper.find('input').first().simulate('change', { target: { value: 'NAME' }});
+    wrapper.update();
+
+    wrapper.find('form').simulate('submit');
+    wrapper.update();
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    wrapper.find('input').last().simulate('change', { target: { value: 'PASSWORD' }});
+    wrapper.update();
+
+    wrapper.find('form').simulate('submit');
+
+    expect(onSubmit).toHaveBeenCalledWith({ name: 'NAME', password: 'PASSWORD' });
+  });
 });