fix: datepicker issues in cypress

tolgee · Aug 22, 2024 · bb910ea · bb910ea
1 parent 22ac1a6
commit bb910ea
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/e2e/cypress/e2e/userSettings/apiKeys.cy.ts b/e2e/cypress/e2e/userSettings/apiKeys.cy.ts
@@ -73,7 +73,7 @@ describe('API keys', () => {
     assertMessage('API key successfully created');
   });
 
-  it('Regenerates key', () => {
+  it.only('Regenerates key', () => {
     const description = 'Oh I am expired';
     cy.contains(description)
       .closestDcy('api-key-list-item')

diff --git a/e2e/cypress/support/registerCommands.ts b/e2e/cypress/support/registerCommands.ts
@@ -129,9 +129,10 @@ export const register = () => {
     });
   });
 
-  Cypress.Commands.add('chooseDatePicker', (selector, value) => {
-    cy.get('body').then(($body) => {
+  Cypress.Commands.add(
+    'chooseDatePicker',
+    (selector: string, value: string) => {
       cy.get(selector).find('input').clear().type(value);
-    });
-  });
+    }
+  );
 };
diff --git a/webapp/src/component/common/form/epirationField/ExpirationDateField.tsx b/webapp/src/component/common/form/epirationField/ExpirationDateField.tsx
@@ -1,12 +1,13 @@
 import { useField } from 'formik';
-import { default as React, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Box,
   FormControl,
   InputLabel,
   MenuItem,
   Select,
   TextField as MuiTextField,
+  useTheme,
 } from '@mui/material';
 import { T } from '@tolgee/react';
 import { DatePicker } from '@mui/x-date-pickers';
@@ -18,6 +19,7 @@ export const ExpirationDateField = ({
   options: ExpirationDateOptions;
 }) => {
   const [input, _, helpers] = useField('expiresAt');
+  const theme = useTheme();
 
   const getInitialSelectValue = () =>
     options.find((o) => o.time === input.value)?.value || 'custom';
@@ -73,6 +75,7 @@ export const ExpirationDateField = ({
                 }
               }}
               slots={{ textField: MuiTextField }}
+              desktopModeMediaQuery={theme.breakpoints.up('md')}
             />
           </Box>
         )}