TabbedForm validation differences between development and production build

What you were expecting: I was expecting the FormTab instances in a TabbedForm to turn red in case any of the child inputs are invalid. This is working as expected during development. The className “RaTabbedForm-errorTabButton-41” is being added to the FormTab.

Opening the page containing the ‘Create’ and ‘TabbedForm’ component shows all tabs as invalid even before pressing the save button.

What happened instead: After running yarn build and deploying this production build the tabs are not being marked as invalid. The inspector is showing a className “jss40”, but this class can’t be found in the generated sources.

The tabs are not turning red on validation errors.

Other information: Dev environment (yarn start)

Prod environment (yarn build)

Environment

• React-admin version: 3.9.4
• Last version that did not exhibit the issue (if applicable):
• React version: 16.14.0
• Browser: Google Chrome 86.0.4240.80
• Stack trace (in case of a JS error):

[donovantc]

I’ve been struggling with this issue for a while now, so I decided to create a very basic setup using create-react-app and add react-admin as mentioned in the react-admin tutorial.

I added a create component which has 2 tabs, and set all fields to required. In development, if you start entering a field, but leave it empty and switch to the next tab, you already see the previous tab with red text.

However in the production build, this doesn’t happen. The text remains its original colour.

Here is the codesandbox with this basic setup. Here you will see the correct behaviour in the development build.

I have also deployed this code directly from the codesandbox via Netlify: https://csb-m5c9z.netlify.app/#/users/create. Here you will see the incorrect behaviour in the production build.

Looking at the css in the production build, you can see that the color from react-admin styles jss91 is overwritten by the MuiTab-TextColorInherit class.

Looking at how they are included in the final build, the MuiTab styles are loaded after the RaTabbedForm styles, meaning they will get preference.

So I think this may be related to how the CSS is imported or loaded.

@fzaninotto @djhi unless I am doing something wrong, I believe that this is still an issue.

[fzaninotto]

Should be fixed by #5984