fix: change useForm mode to trigger validation on multiple ways [EP-3…

…675]
natgeosociety · Jan 13, 2021 · 5048ffe · 5048ffe
1 parent 6a8a3de
commit 5048ffe
Show file tree

Hide file tree

Showing 18 changed files with 18 additions and 19 deletions.
diff --git a/packages/earth-admin/src/components/users/user-edit/UserEdit.tsx b/packages/earth-admin/src/components/users/user-edit/UserEdit.tsx
@@ -39,7 +39,7 @@ export default function UserEdit(props: UserEditProps) {
   const { name, email, groups, id } = data || {};
 
   const { handleSubmit, register, errors, control, getValues, formState } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const [serverErrors, setServerErrors] = useState(null);
   const [selectedGroups, setSelectedGroups] = useState([]);

diff --git a/packages/earth-admin/src/pages-client/dashboards/details.tsx b/packages/earth-admin/src/pages-client/dashboards/details.tsx
@@ -96,7 +96,7 @@ export function DashboardDetail(props: IProps) {
   }, [data]);
 
   const { getValues, register, formState, errors, control } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched, isDirty, isValid } = formState;

diff --git a/packages/earth-admin/src/pages-client/dashboards/new.tsx b/packages/earth-admin/src/pages-client/dashboards/new.tsx
@@ -52,7 +52,7 @@ export function NewDashboard(props: IProps) {
   const { selectedGroup } = useAuth0();
   const { t } = useTranslation('admin');
   const { register, watch, formState, errors, setValue, control, handleSubmit } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched, isDirty, isValid } = formState;

diff --git a/packages/earth-admin/src/pages-client/layers/details.tsx b/packages/earth-admin/src/pages-client/layers/details.tsx
@@ -124,7 +124,7 @@ export function LayerDetail(props: any) {
   }, [layer]);
 
   const { getValues, register, formState, errors, control } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched, isDirty, isValid } = formState;

diff --git a/packages/earth-admin/src/pages-client/layers/new.tsx b/packages/earth-admin/src/pages-client/layers/new.tsx
@@ -59,7 +59,7 @@ export function NewLayer(props: IProps) {
   const { selectedGroup } = useAuth0();
   const { t } = useTranslation('admin');
   const { register, watch, formState, errors, setValue, control, handleSubmit } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const {
     category: layerCategoryOptions = [],

diff --git a/packages/earth-admin/src/pages-client/organizations/details.tsx b/packages/earth-admin/src/pages-client/organizations/details.tsx
@@ -68,7 +68,7 @@ export function OrganizationDetails(props: OrganizationDetailsProps) {
     watch,
     reset,
   } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched } = formState;

diff --git a/packages/earth-admin/src/pages-client/organizations/new.tsx b/packages/earth-admin/src/pages-client/organizations/new.tsx
@@ -51,7 +51,7 @@ export function NewOrganization(props: IProps) {
   const [ownersFeedback, setOwnersFeedback] = useState([]);
   const { selectedGroup, updateToken } = useContext(Auth0Context);
   const { handleSubmit, register, errors, formState, setValue, control, watch } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const { isValid, touched } = formState;
   const renderErrorFor = setupErrors(errors, touched);

diff --git a/packages/earth-admin/src/pages-client/places/details.tsx b/packages/earth-admin/src/pages-client/places/details.tsx
@@ -126,7 +126,7 @@ export function PlaceDetail(props: IProps) {
   } = place;
 
   const { getValues, register, formState, errors } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched, isDirty, isValid } = formState;

diff --git a/packages/earth-admin/src/pages-client/places/new.tsx b/packages/earth-admin/src/pages-client/places/new.tsx
@@ -47,10 +47,9 @@ export function NewPlace(props: IProps) {
   const { onDataChange = noop, dynamicOptions } = props;
   const { type: placeTypeOptions = [] } = dynamicOptions;
   const { register, handleSubmit, watch, formState, errors, setValue, reset, control } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const { touched, isDirty, isValid } = formState;
-  console.log('@@@@@@', isDirty, isValid);
   const watchName = watch('name');
   const [isLoading, setIsLoading] = useState(false);
   const [geojsonValue, setGeojson] = useState(null);

diff --git a/packages/earth-admin/src/pages-client/users/home.tsx b/packages/earth-admin/src/pages-client/users/home.tsx
@@ -80,7 +80,7 @@ export function UsersHome(props: any) {
   );
 
   const { watch, setValue, control, getValues } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const inviteUsersWatcher = watch('users');

diff --git a/packages/earth-admin/src/pages-client/widgets/details.tsx b/packages/earth-admin/src/pages-client/widgets/details.tsx
@@ -108,7 +108,7 @@ export function WidgetsDetail(props: WidgetProps) {
   }, [widget]);
 
   const { getValues, register, formState, errors, control } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched, isDirty, isValid } = formState;

diff --git a/packages/earth-admin/src/pages-client/widgets/new.tsx b/packages/earth-admin/src/pages-client/widgets/new.tsx
@@ -59,7 +59,7 @@ export function NewWidget(props: IProps) {
   const { selectedGroup } = useAuth0();
   const { t } = useTranslation('admin');
   const { register, watch, formState, errors, setValue, control, handleSubmit } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { touched, isDirty, isValid } = formState;

diff --git a/packages/earth-map/src/components/clip-layer/ClipLayer.tsx b/packages/earth-map/src/components/clip-layer/ClipLayer.tsx
@@ -48,7 +48,7 @@ export function ClipLayer(props: IProps) {
   const [childLayers, setChildLayers] = useState([]);
   const { t } = useTranslation();
   const { register, handleSubmit, formState, control, watch, setValue } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const { isDirty, isValid, isSubmitting } = formState;
   const selectedPrimaryLayer = watch('primaryLayer');

diff --git a/...th-map/src/components/collection/collection-downloadmetrics/CollectionDownloadMetrics.tsx b/...th-map/src/components/collection/collection-downloadmetrics/CollectionDownloadMetrics.tsx
@@ -53,7 +53,7 @@ export function CollectionDownloadMetrics(props: IProps) {
   const [metricSlugs, setMetricSlugs] = useState([]);
   const [isLoadingMetricSlugs, setIsLoadingMetricSlugs] = useState(false);
   const { register, handleSubmit, formState, control, watch } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const { isDirty, isValid, isSubmitting } = formState;
   const metricsWatcher = watch('metrics');

diff --git a/packages/earth-map/src/components/collection/collection-editplaces/CollectionEditPlaces.tsx b/packages/earth-map/src/components/collection/collection-editplaces/CollectionEditPlaces.tsx
@@ -46,7 +46,7 @@ export function CollectionEditPlaces(props: IProps) {
   const [saveError, setSaveError] = useState('');
   const [isSaveConflict, setIsSaveConflict] = useState(false);
   const { control, handleSubmit, formState, getValues } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const { isValid, isSubmitting, isDirty } = formState;
 

diff --git a/packages/earth-map/src/components/collection/collection-new/CollectionNew.tsx b/packages/earth-map/src/components/collection/collection-new/CollectionNew.tsx
@@ -37,7 +37,7 @@ const CollectionNew = (props: IProps) => {
   const { t } = useTranslation();
   const canCreateCollection = !!privateGroups.length;
   const [saveError, setSaveError] = useState(null);
-  const { handleSubmit, register, errors, formState } = useForm({ mode: 'onChange' });
+  const { handleSubmit, register, errors, formState } = useForm({ mode: 'all' });
   const { touched, isDirty, isValid, isSubmitting } = formState;
   const renderErrorFor = setupErrors(errors, touched);
 

diff --git a/packages/earth-map/src/components/collection/collection-rename/CollectionRename.tsx b/packages/earth-map/src/components/collection/collection-rename/CollectionRename.tsx
@@ -43,7 +43,7 @@ export function CollectionRename(props: IProps) {
   const [saveError, setSaveError] = useState('');
   const [isSaveConflict, setIsSaveConflict] = useState(false);
   const { register, errors, handleSubmit, formState, getValues } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
   const { touched, isDirty, isValid, isSubmitting } = formState;
   const renderErrorFor = setupErrors(errors, touched);

diff --git a/packages/earth-map/src/pages/profile/component.tsx b/packages/earth-map/src/pages/profile/component.tsx
@@ -38,7 +38,7 @@ export function ProfileComponent(props: IProps) {
   const { t } = useTranslation();
 
   const { getValues, register, formState, errors: formErrors } = useForm({
-    mode: 'onChange',
+    mode: 'all',
   });
 
   const { userData, logout, login, isAuthenticated, updateToken } = useContext(Auth0Context);