fix: autofocus search field in appform and fix box shrinking (#882)

graasp · Dec 1, 2023 · bfbf2d6 · bfbf2d6
1 parent 946d8d8
commit bfbf2d6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 25 deletions.
diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -1,7 +1,7 @@
 import { ChangeEventHandler, useState } from 'react';
 
 import { ArrowBack } from '@mui/icons-material';
-import { Alert, Stack, TextField } from '@mui/material';
+import { Alert, Box, Stack, TextField } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
@@ -172,34 +172,42 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
             fullWidth
             placeholder={translateBuilder('Search for an app')}
             variant="outlined"
+            autoFocus
             size="small"
             onChange={searchAnApp}
           />
-          <Grid2
-            container
-            spacing={2}
-            maxHeight={400}
-            alignItems="stretch"
-            overflow="auto"
-          >
-            <AppGrid
-              currentUrl={currentUrl}
-              handleSelection={handleAppSelection}
-              searchQuery={searchQuery}
-            />
-            <AppCard
-              id={CUSTOM_APP_CYPRESS_ID}
-              name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
-              description={translateBuilder(
-                BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
-              )}
-              image={addNewImage}
-              onClick={addCustomApp}
-            />
-          </Grid2>
+          <Box display="flex" flexGrow={1}>
+            <Grid2
+              container
+              spacing={2}
+              height="max-content"
+              maxHeight={400}
+              alignItems="stretch"
+              overflow="auto"
+            >
+              <AppGrid
+                currentUrl={currentUrl}
+                handleSelection={handleAppSelection}
+                searchQuery={searchQuery}
+              />
+              <AppCard
+                id={CUSTOM_APP_CYPRESS_ID}
+                name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
+                description={translateBuilder(
+                  BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
+                )}
+                image={addNewImage}
+                onClick={addCustomApp}
+              />
+            </Grid2>
+          </Box>
         </>
       )}
-      <NameForm setChanges={onChange} updatedProperties={updatedProperties} />
+      <NameForm
+        setChanges={onChange}
+        updatedProperties={updatedProperties}
+        autoFocus={false}
+      />
     </Stack>
   );
 };

diff --git a/src/components/item/form/NameForm.tsx b/src/components/item/form/NameForm.tsx
@@ -9,13 +9,15 @@ import type { EditModalContentPropType } from './EditModalWrapper';
 
 export type NameFormProps = EditModalContentPropType & {
   required?: boolean;
+  autoFocus?: boolean;
 };
 
 const NameForm = ({
   item,
   required,
   updatedProperties,
   setChanges,
+  autoFocus = true,
 }: NameFormProps): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const theme = useTheme();
@@ -28,7 +30,7 @@ const NameForm = ({
   return (
     <TextField
       variant="standard"
-      autoFocus
+      autoFocus={autoFocus}
       required={required}
       id={ITEM_FORM_NAME_INPUT_ID}
       label={translateBuilder(BUILDER.CREATE_NEW_ITEM_NAME_LABEL)}