SIMSBIOHUB 335: Tab Through Observation Edit

app/src/components/data-grid/TextFieldDataGrid.tsx

@@ -0,0 +1,33 @@
+import TextField, { TextFieldProps } from '@mui/material/TextField/TextField';
+import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
+import { GridRenderEditCellParams, GridValidRowModel } from '@mui/x-data-grid';
+import { useRef } from 'react';
+
+interface ITextFieldCustomValidation<DataGridType extends GridValidRowModel> {
+  textFieldProps: TextFieldProps;
+  dataGridProps: GridRenderEditCellParams<DataGridType>;
+}
+
+const TextFieldDataGrid = <DataGridType extends GridValidRowModel>({
+  textFieldProps,
+  dataGridProps
+}: ITextFieldCustomValidation<DataGridType>) => {
+  const ref = useRef<HTMLInputElement>();
+  useEnhancedEffect(() => {
+    if (dataGridProps.hasFocus) {
+      ref.current?.focus();
+    }
+  }, [dataGridProps.hasFocus]);
+  return (
+    <TextField
+      inputRef={ref}
+      value={dataGridProps.value ?? ''}
+      variant="outlined"
+      type="text"
+      inputProps={{ inputMode: 'numeric' }}
+      {...textFieldProps}
+    />
+  );
+};
+
+export default TextFieldDataGrid;

app/src/components/data-grid/TimePickerDataGrid.tsx

@@ -0,0 +1,48 @@
+import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
+import { GridRenderEditCellParams, GridValidRowModel, useGridApiContext } from '@mui/x-data-grid';
+import { LocalizationProvider, TimePicker, TimePickerProps } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import moment from 'moment';
+import { useRef } from 'react';
+
+interface ITimePickerDataGridProps<DataGridType extends GridValidRowModel> {
+  dateFieldProps?: TimePickerProps<any>;
+  dataGridProps: GridRenderEditCellParams<DataGridType>;
+}
+
+const TimePickerDataGrid = <DataGridType extends GridValidRowModel>({
+  dateFieldProps,
+  dataGridProps
+}: ITimePickerDataGridProps<DataGridType>) => {
+  const apiRef = useGridApiContext();
+  const ref = useRef<HTMLInputElement>(null);
+  useEnhancedEffect(() => {
+    if (dataGridProps.hasFocus) {
+      ref.current?.focus();
+    }
+  }, [dataGridProps.hasFocus]);
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <TimePicker
+        inputRef={ref}
+        value={(dataGridProps.value && moment(dataGridProps.value, 'HH:mm:ss')) || null}
+        onChange={(value) => {
+          apiRef?.current.setEditCellValue({ id: dataGridProps.id, field: dataGridProps.field, value: value });
+        }}
+        onAccept={(value) => {
+          apiRef?.current.setEditCellValue({
+            id: dataGridProps.id,
+            field: dataGridProps.field,
+            value: value?.format('HH:mm:ss')
+          });
+        }}
+        views={['hours', 'minutes', 'seconds']}
+        timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
+        ampm={false}
+        {...dateFieldProps}
+      />
+    </LocalizationProvider>
+  );
+};
+
+export default TimePickerDataGrid;

app/src/components/data-grid/autocomplete/AsyncAutocompleteDataGridEditCell.tsx

@@ -2,10 +2,11 @@
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import TextField from '@mui/material/TextField';
+import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { GridRenderCellParams, GridValidRowModel, useGridApiContext } from '@mui/x-data-grid';
 import { IAutocompleteDataGridOption } from 'components/data-grid/autocomplete/AutocompleteDataGrid.interface';
 import { DebouncedFunc } from 'lodash-es';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 export interface IAsyncAutocompleteDataGridEditCell<
   DataGridType extends GridValidRowModel,
@@ -52,6 +53,14 @@
 
   const apiRef = useGridApiContext();
 
+  const ref = useRef<HTMLInputElement>();
+
+  useEnhancedEffect(() => {
+    if (dataGridProps.hasFocus) {
+      ref.current?.focus();
+      console.log('Focus fired!');
+    }
+  }, [dataGridProps.hasFocus]);
   // The current data grid value
   const dataGridValue = dataGridProps.value;
   // The input field value
@@ -168,6 +177,7 @@
       renderInput={(params) => (
         <TextField
           {...params}
+          inputRef={ref}
           size="small"
           variant="outlined"
           fullWidth

app/src/components/data-grid/autocomplete/AutocompleteDataGridEditCell.tsx

@@ -1,8 +1,10 @@
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
+import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { GridRenderCellParams, GridValidRowModel, useGridApiContext } from '@mui/x-data-grid';
 import { IAutocompleteDataGridOption } from 'components/data-grid/autocomplete/AutocompleteDataGrid.interface';
+import { useRef } from 'react';
 
 export interface IAutocompleteDataGridEditCellProps<
   DataGridType extends GridValidRowModel,
@@ -45,6 +47,15 @@
 
   const apiRef = useGridApiContext();
 
+  const ref = useRef<HTMLInputElement>();
+
+  useEnhancedEffect(() => {
+    if (dataGridProps.hasFocus) {
+      ref.current?.focus();
+      console.log('Focus fired!');
+    }
+  }, [dataGridProps.hasFocus]);
+
   // The current data grid value
   const dataGridValue = dataGridProps.value;
 
@@ -98,6 +109,7 @@
       renderInput={(params) => (
         <TextField
           {...params}
+          inputRef={ref}
           size="small"
           variant="outlined"
           fullWidth

app/src/components/data-grid/taxonomy/TaxonomyDataGridEditCell.tsx

@@ -3,7 +3,7 @@ import AsyncAutocompleteDataGridEditCell from 'components/data-grid/autocomplete
 import { IAutocompleteDataGridOption } from 'components/data-grid/autocomplete/AutocompleteDataGrid.interface';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import debounce from 'lodash-es/debounce';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 export interface ITaxonomyDataGridCellProps<DataGridType extends GridValidRowModel> {
   dataGridProps: GridRenderEditCellParams<DataGridType>;