fix(mui): render all tabs into DOM

Author: rvsia

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

@@ -1,11 +1,15 @@
-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';
 
+import './tabs.scss';
+
 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 } className={ idx !== activeTab ? 'mui-ddform-hidden-tabs' : '' }>{ formOptions.renderForm(fields, formOptions) }</div>
+));
 
 class FormTabs extends Component {
   state = {
@@ -24,7 +28,7 @@ class FormTabs extends Component {
             { renderTabHeader(fields) }
           </Tabs>
         </AppBar>
-        { renderTabContet(fields[activeTab], formOptions) }
+        { renderTabContet(fields, formOptions, activeTab) }
       </div>
     );
   }

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

@@ -0,0 +1,3 @@
+.mui-ddform-hidden-tabs {
+    display: none;
+}