n-d-r-d-g / redesigned Goto Github PK

Problem

Currently, the Tabs component from NextUI unmounts inactive tabs' components. When users switch from tab to tab, they lose all their form data in the previous tab. The current implemented solution is to save the current form data in Formik's initialValues whenever the user clicks on a new tab.

This has caused a bug where the Reset button wouldn't reset the form data to the actual initialValues. To fix this, I had to add a new prop on the Reset button to accept a function whose responsibility is to reset the initial values. The Reset button then calls this prop is it has been provided, then resets the form.

This is working currently, however, I think the DX is not optimized and this can cause maintenance issues, e.g. regression, later.

Solution

The reason why all the above needed to be implemented was because NextUI currently does not allow for tabs' content to always be mounted. The default behavior is to unmount all inactive tabs' content, which makes sense for performance reasons.

A new prop: destroyInactiveTabPanel has been added and is available currently in Canary (feature). Once this props is available in a stable version of NextUI, it can be used instead the current implementation.

IMHO, this will make the code way more maintainable and cause less regressions in the future.

Add JSON translation files matching EN JSON file naming under mudocs/public/locales/fr.

DO NOT TRANSLATE TAGS INSIDE THE TRANSLATIONS, E.G:
EN -> "title": "Welcome <MyName />"
FR -> "title": "Bienvenue <MyName />"

Add JSON translation files matching EN JSON file naming under mudocs/public/locales/mu.

DO NOT TRANSLATE TAGS INSIDE THE TRANSLATIONS, E.G:
EN -> "title": "Welcome <MyName />"
MU -> "title": "Bienveni <MyName />"