SideDrawer: scroll to selected field

www/src/components/SideDrawer/Form/FieldWrapper.tsx

@@ -50,8 +50,8 @@ export default function FieldWrapper({
         alignItems="center"
         className={classes.header}
         component="label"
-        id={`sidemodal-label-${name}`}
-        htmlFor={`sidemodal-field-${name}`}
+        id={`sidedrawer-label-${name}`}
+        htmlFor={`sidedrawer-field-${name}`}
       >
         <Grid item className={classes.iconContainer}>
           {getFieldIcon(type)}

www/src/components/SideDrawer/Form/Fields/DatePicker.tsx

@@ -29,7 +29,7 @@ export default function DatePicker(props: KeyboardDatePickerProps) {
       value={transformedValue}
       label=""
       hiddenLabel
-      id={`sidemodal-field-${props.field.name}`}
+      id={`sidedrawer-field-${props.field.name}`}
     />
   );
 }

www/src/components/SideDrawer/Form/Fields/DateTimePicker.tsx

@@ -32,7 +32,7 @@ export default function DateTimePicker(props: KeyboardDateTimePickerProps) {
       value={transformedValue}
       label=""
       hiddenLabel
-      id={`sidemodal-field-${props.field.name}`}
+      id={`sidedrawer-field-${props.field.name}`}
     />
   );
 }

www/src/components/SideDrawer/Form/Fields/FileUploader.tsx

@@ -99,7 +99,7 @@ export default function FileUploader({
   return (
     <>
       <ButtonBase className={classes.dropzoneButton} {...getRootProps()}>
-        <input id={`sidemodal-field-${field.name}`} {...getInputProps()} />
+        <input id={`sidedrawer-field-${field.name}`} {...getInputProps()} />
         <UploadIcon />
         <Typography variant="body1" color="textSecondary">
           Upload file

www/src/components/SideDrawer/Form/Fields/ImageUploader.tsx

@@ -140,7 +140,7 @@ export default function ImageUploader({
   return (
     <>
       <ButtonBase className={classes.dropzoneButton} {...getRootProps()}>
-        <input id={`sidemodal-field-${field.name}`} {...getInputProps()} />
+        <input id={`sidedrawer-field-${field.name}`} {...getInputProps()} />
         <AddIcon />
         <Typography variant="body1" color="textSecondary">
           Upload image

www/src/components/SideDrawer/Form/Fields/MultiSelect.tsx

@@ -229,7 +229,7 @@ export default function MultiSelect({
         value={field.value ?? []}
         label=""
         hiddenLabel
-        id={`sidemodal-field-${field.name}`}
+        id={`sidedrawer-field-${field.name}`}
         variant="filled"
         fullWidth
         select

www/src/components/SideDrawer/Form/Fields/Rating.tsx

@@ -37,7 +37,7 @@ export default function Rating(props: IRatingProps) {
       <Grid container alignItems="center" className={classes.root}>
         <MuiRating
           name={props.field.name}
-          id={`sidemodal-field-${props.field.name}`}
+          id={`sidedrawer-field-${props.field.name}`}
           value={typeof props.field.value === "number" ? props.field.value : 0}
           onChange={(event, newValue) => {
             props.form.setFieldValue(props.field.name, newValue);

www/src/components/SideDrawer/Form/Fields/SingleSelect.tsx

@@ -36,7 +36,7 @@ export default function SingleSelect({
       }}
       label=""
       hiddenLabel
-      SelectProps={{ labelId: `sidemodal-label-${props.field.name}` }}
+      SelectProps={{ labelId: `sidedrawer-label-${props.field.name}` }}
     >
       {options.map(option => {
         if (typeof option === "object")

www/src/components/SideDrawer/Form/Fields/Text.tsx

@@ -55,7 +55,7 @@ export default function Text({ fieldVariant = "short", ...props }: ITextProps) {
       placeholder={props.label as string}
       {...variantProps}
       {...props}
-      id={`sidemodal-field-${props.field.name}`}
+      id={`sidedrawer-field-${props.field.name}`}
       label=""
       hiddenLabel
       //InputProps={{ disableUnderline: true }}

www/src/components/SideDrawer/Form/index.tsx

@@ -1,10 +1,12 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import { Formik, Form as FormikForm, Field } from "formik";
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import DateFnsUtils from "@date-io/date-fns";
 import _isFunction from "lodash/isFunction";
 import _isEmpty from "lodash/isEmpty";
 
+import { useFiretableContext } from "contexts/firetableContext";
+
 import { Grid, LinearProgress } from "@material-ui/core";
 
 import Autosave from "./Autosave";
@@ -88,6 +90,15 @@ export interface IFormProps {
 export default function Form({ fields, values }: IFormProps) {
   const initialValues = getInitialValues(fields);
 
+  const { selectedCell } = useFiretableContext();
+  useEffect(() => {
+    if (!selectedCell?.column) return;
+    const elem = document.getElementById(
+      `sidedrawer-label-${selectedCell!.column}`
+    )?.parentNode as HTMLElement;
+    elem?.scrollIntoView({ behavior: "smooth" });
+  }, [selectedCell?.column]);
+
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
       <Formik