fix(material): open date dialog on mobile

closes eclipsesource#2278
LukasBoll · Mar 12, 2024 · 90e9b81 · 90e9b81
1 parent 24f4e5f
commit 90e9b81
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 119 deletions.
diff --git a/packages/material-renderers/src/controls/MaterialDateControl.tsx b/packages/material-renderers/src/controls/MaterialDateControl.tsx
@@ -33,7 +33,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -69,6 +69,7 @@ export const MaterialDateControl = (props: ControlProps) => {
   );
 
   const [key, setKey] = useState<number>(0);
+  const [open, setOpen] = useState<boolean>(false);
 
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
   const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
@@ -103,46 +104,48 @@ export const MaterialDateControl = (props: ControlProps) => {
   );
   const value = getData(data, saveFormat);
 
+  if (!visible) {
+    return null;
+  }
+
   return (
-    <Hidden xsUp={!visible}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DatePicker
-          key={key}
-          label={label}
-          value={value}
-          onAccept={onChange}
-          format={format}
-          views={views}
-          disabled={!enabled}
-          slotProps={{
-            actionBar: ({ wrapperVariant }) => ({
-              actions:
-                wrapperVariant === 'desktop'
-                  ? []
-                  : ['clear', 'cancel', 'accept'],
-            }),
-            textField: {
-              id: id + '-input',
-              required:
-                required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-              autoFocus: appliedUiSchemaOptions.focus,
-              error: !isValid,
-              fullWidth: !appliedUiSchemaOptions.trim,
-              inputProps: {
-                type: 'text',
-              },
-              InputLabelProps: data ? { shrink: true } : undefined,
-              onFocus: onFocus,
-              onBlur: onBlurHandler,
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        key={key}
+        label={label}
+        value={value}
+        onAccept={onChange}
+        format={format}
+        views={views}
+        disabled={!enabled}
+        slotProps={{
+          actionBar: ({ wrapperVariant }) => ({
+            actions:
+              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+          }),
+          textField: {
+            id: id + '-input',
+            required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
+            autoFocus: appliedUiSchemaOptions.focus,
+            error: !isValid,
+            fullWidth: !appliedUiSchemaOptions.trim,
+            inputProps: {
+              type: 'text',
             },
-          }}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </LocalizationProvider>
-    </Hidden>
+            InputLabelProps: data ? { shrink: true } : undefined,
+            onFocus: onFocus,
+            onBlur: onBlurHandler,
+          },
+        }}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </LocalizationProvider>
   );
 };
 

diff --git a/packages/material-renderers/src/controls/MaterialDateTimeControl.tsx b/packages/material-renderers/src/controls/MaterialDateTimeControl.tsx
@@ -33,7 +33,7 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -74,6 +74,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
 
   const [key, setKey] = useState<number>(0);
+  const [open, setOpen] = useState<boolean>(false);
 
   const views = appliedUiSchemaOptions.views ?? [
     'year',
@@ -110,47 +111,48 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   );
   const value = getData(data, saveFormat);
 
+  if (!visible) {
+    return null;
+  }
   return (
-    <Hidden xsUp={!visible}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DateTimePicker
-          key={key}
-          label={label}
-          value={value}
-          onAccept={onChange}
-          format={format}
-          ampm={!!appliedUiSchemaOptions.ampm}
-          views={views}
-          disabled={!enabled}
-          slotProps={{
-            actionBar: ({ wrapperVariant }) => ({
-              actions:
-                wrapperVariant === 'desktop'
-                  ? []
-                  : ['clear', 'cancel', 'accept'],
-            }),
-            textField: {
-              id: id + '-input',
-              required:
-                required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-              autoFocus: appliedUiSchemaOptions.focus,
-              error: !isValid,
-              fullWidth: !appliedUiSchemaOptions.trim,
-              inputProps: {
-                type: 'text',
-              },
-              InputLabelProps: data ? { shrink: true } : undefined,
-              onFocus: onFocus,
-              onBlur: onBlurHandler,
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateTimePicker
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        key={key}
+        label={label}
+        value={value}
+        onAccept={onChange}
+        format={format}
+        ampm={!!appliedUiSchemaOptions.ampm}
+        views={views}
+        disabled={!enabled}
+        slotProps={{
+          actionBar: ({ wrapperVariant }) => ({
+            actions:
+              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+          }),
+          textField: {
+            id: id + '-input',
+            required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
+            autoFocus: appliedUiSchemaOptions.focus,
+            error: !isValid,
+            fullWidth: !appliedUiSchemaOptions.trim,
+            inputProps: {
+              type: 'text',
             },
-          }}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </LocalizationProvider>
-    </Hidden>
+            InputLabelProps: data ? { shrink: true } : undefined,
+            onFocus: onFocus,
+            onBlur: onBlurHandler,
+          },
+        }}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </LocalizationProvider>
   );
 };
 

diff --git a/packages/material-renderers/src/controls/MaterialTimeControl.tsx b/packages/material-renderers/src/controls/MaterialTimeControl.tsx
@@ -33,7 +33,7 @@ import {
   defaultTimeFormat,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -63,6 +63,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const isValid = errors.length === 0;
 
   const [key, setKey] = useState<number>(0);
+  const [open, setOpen] = useState<boolean>(false);
 
   const showDescription = !isDescriptionHidden(
     visible,
@@ -104,47 +105,48 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
   const value = getData(data, saveFormat);
 
+  if (!visible) {
+    return null;
+  }
   return (
-    <Hidden xsUp={!visible}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <TimePicker
-          key={key}
-          label={label}
-          value={value}
-          onAccept={onChange}
-          format={format}
-          ampm={!!appliedUiSchemaOptions.ampm}
-          views={views}
-          disabled={!enabled}
-          slotProps={{
-            actionBar: ({ wrapperVariant }) => ({
-              actions:
-                wrapperVariant === 'desktop'
-                  ? []
-                  : ['clear', 'cancel', 'accept'],
-            }),
-            textField: {
-              id: id + '-input',
-              required:
-                required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-              autoFocus: appliedUiSchemaOptions.focus,
-              error: !isValid,
-              fullWidth: !appliedUiSchemaOptions.trim,
-              inputProps: {
-                type: 'text',
-              },
-              InputLabelProps: data ? { shrink: true } : undefined,
-              onFocus: onFocus,
-              onBlur: onBlurHandler,
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <TimePicker
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        key={key}
+        label={label}
+        value={value}
+        onAccept={onChange}
+        format={format}
+        ampm={!!appliedUiSchemaOptions.ampm}
+        views={views}
+        disabled={!enabled}
+        slotProps={{
+          actionBar: ({ wrapperVariant }) => ({
+            actions:
+              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+          }),
+          textField: {
+            id: id + '-input',
+            required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
+            autoFocus: appliedUiSchemaOptions.focus,
+            error: !isValid,
+            fullWidth: !appliedUiSchemaOptions.trim,
+            inputProps: {
+              type: 'text',
             },
-          }}
-        />
-        <FormHelperText error={!isValid && !showDescription}>
-          {firstFormHelperText}
-        </FormHelperText>
-        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
-      </LocalizationProvider>
-    </Hidden>
+            InputLabelProps: data ? { shrink: true } : undefined,
+            onFocus: onFocus,
+            onBlur: onBlurHandler,
+          },
+        }}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
+    </LocalizationProvider>
   );
 };