Merge pull request #1228 from gchq/bugfix/remove-rjsf-autofocus

Reverted RJSF autofocus changes Former-commit-id: c6db4d9
gchq · Apr 23, 2024 · 94f3a77 · 94f3a77
2 parents 1676b87 + def18c9
commit 94f3a77
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 86 deletions.
diff --git a/frontend/src/Form/JsonSchemaForm.tsx b/frontend/src/Form/JsonSchemaForm.tsx
@@ -17,7 +17,7 @@ import { useTheme } from '@mui/material/styles'
 import Form from '@rjsf/mui'
 import { ArrayFieldTemplateProps, ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils'
 import validator from '@rjsf/validator-ajv8'
-import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useState } from 'react'
 import ValidationErrorIcon from 'src/entry/model/common/ValidationErrorIcon'
 import Nothing from 'src/MuiForms/Nothing'
 import { SplitSchemaNoRender } from 'types/types'
@@ -91,27 +91,10 @@ export default function JsonSchemaForm({
   defaultCurrentUserInEntityList?: boolean
 }) {
   const [activeStep, setActiveStep] = useState(0)
-  const [firstQuestionKey, setFirstQuestionKey] = useState<string | undefined>()
   const theme = useTheme()
 
   const currentStep = splitSchema.steps[activeStep]
 
-  const getKeyFromSection = useCallback((schema: RJSFSchema, key: string) => {
-    const [firstQuestionKey] = Object.keys(schema)
-    let updatedKey = `${key}_${firstQuestionKey}`
-    if (schema[firstQuestionKey].type === 'object') {
-      updatedKey = getKeyFromSection(schema[firstQuestionKey].properties, updatedKey)
-    }
-    return updatedKey
-  }, [])
-
-  useEffect(() => {
-    // Set focus to first question in current step
-    if (currentStep) {
-      setFirstQuestionKey(getKeyFromSection(currentStep.schema.properties, 'root'))
-    }
-  }, [currentStep, getKeyFromSection])
-
   if (!currentStep) {
     return null
   }
@@ -153,42 +136,39 @@ export default function JsonSchemaForm({
         </Stepper>
       </Grid>
       <Grid item xs={12} sm={9} md={10}>
-        {firstQuestionKey && (
-          <Form
-            schema={currentStep.schema}
-            formData={currentStep.state}
-            onChange={onFormChange}
-            validator={validator}
-            widgets={widgets}
-            uiSchema={currentStep.uiSchema}
-            liveValidate
-            omitExtraData
-            disabled={!canEdit}
-            liveOmit
-            formContext={{
-              editMode: canEdit,
-              formSchema: currentStep.schema,
-              defaultCurrentUser: defaultCurrentUserInEntityList,
-              firstQuestionKey: firstQuestionKey,
-            }}
-            templates={
-              !canEdit
-                ? {
-                    DescriptionFieldTemplate,
-                    ArrayFieldTemplate,
-                    ObjectFieldTemplate,
-                  }
-                : {
-                    ArrayFieldTemplate,
-                    ObjectFieldTemplate,
-                    ErrorListTemplate,
-                  }
-            }
-          >
-            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
-            <></>
-          </Form>
-        )}
+        <Form
+          schema={currentStep.schema}
+          formData={currentStep.state}
+          onChange={onFormChange}
+          validator={validator}
+          widgets={widgets}
+          uiSchema={currentStep.uiSchema}
+          liveValidate
+          omitExtraData
+          disabled={!canEdit}
+          liveOmit
+          formContext={{
+            editMode: canEdit,
+            formSchema: currentStep.schema,
+            defaultCurrentUser: defaultCurrentUserInEntityList,
+          }}
+          templates={
+            !canEdit
+              ? {
+                  DescriptionFieldTemplate,
+                  ArrayFieldTemplate,
+                  ObjectFieldTemplate,
+                }
+              : {
+                  ArrayFieldTemplate,
+                  ObjectFieldTemplate,
+                  ErrorListTemplate,
+                }
+          }
+        >
+          {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+          <></>
+        </Form>
       </Grid>
     </Grid>
   )

diff --git a/frontend/src/MuiForms/CustomTextInput.tsx b/frontend/src/MuiForms/CustomTextInput.tsx
@@ -66,10 +66,6 @@ export default function CustomTextInput(props: CustomTextInputProps) {
           ...(!formContext.editMode && { disableUnderline: true }),
           'data-test': id,
         }}
-        inputRef={(inputRef) => {
-          // Set focus if this is the first question
-          if (inputRef && formContext.firstQuestionKey === id) inputRef.focus()
-        }}
       />
     </Fragment>
   )

diff --git a/frontend/src/MuiForms/RichTextInput.tsx b/frontend/src/MuiForms/RichTextInput.tsx
@@ -1,6 +1,5 @@
 import { Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { forwardRef } from 'react'
 import MarkdownDisplay from 'src/common/MarkdownDisplay'
 import RichTextEditor from 'src/common/RichTextEditor'
 
@@ -48,12 +47,11 @@ export default function RichTextInput({
     )
   }
 
-  // Hacky way to allow control of focus in MDEditor
-  const WrappedRichTextEditor = forwardRef(() => (
+  return (
     <RichTextEditor
       value={value}
       onChange={onChange}
-      textareaProps={{ disabled, id, autoFocus: formContext.firstQuestionKey === id }}
+      textareaProps={{ disabled, id }}
       errors={rawErrors}
       label={
         <Typography fontWeight='bold'>
@@ -63,8 +61,5 @@ export default function RichTextInput({
       }
       key={label}
     />
-  ))
-  WrappedRichTextEditor.displayName = 'WrappedRichTextEditor'
-
-  return <WrappedRichTextEditor />
+  )
 }
diff --git a/frontend/src/MuiForms/TagSelector.tsx b/frontend/src/MuiForms/TagSelector.tsx
@@ -6,21 +6,12 @@ interface TagSelectorProps {
   onChange: (newValue: string[]) => void
   value: string[]
   label: string
-  id: string
   formContext?: FormContextType
   required?: boolean
   rawErrors?: string[]
 }
 
-export default function TagSelector({
-  onChange,
-  value,
-  label,
-  id,
-  formContext,
-  required,
-  rawErrors,
-}: TagSelectorProps) {
+export default function TagSelector({ onChange, value, label, formContext, required, rawErrors }: TagSelectorProps) {
   const theme = useTheme()
 
   const handleChange = (_event: React.SyntheticEvent<Element, Event>, newValues: string[]) => {
@@ -68,10 +59,6 @@ export default function TagSelector({
                   },
                   fontStyle: value ? 'unset' : 'italic',
                 }}
-                inputRef={(inputRef) => {
-                  // Set focus if this is the first question
-                  if (inputRef && formContext.firstQuestionKey === id) inputRef.focus()
-                }}
               />
             )}
           />

diff --git a/frontend/src/common/RichTextEditor.tsx b/frontend/src/common/RichTextEditor.tsx
@@ -6,7 +6,7 @@ import Button from '@mui/material/Button'
 import { useTheme } from '@mui/material/styles'
 import { MDEditorProps } from '@uiw/react-md-editor'
 import dynamic from 'next/dynamic'
-import { FocusEvent, ReactNode, useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 // The MD Editor library uses custom CSS property names which do not correspond to standard CSS naming
 interface MDEditorStyling {
@@ -52,10 +52,6 @@ export default function RichTextEditor({
     '--color-border-default': errors && errors.length > 0 ? theme.palette.error.main : '',
   }
 
-  const handleFocus = (event: FocusEvent<HTMLTextAreaElement, Element>) => {
-    event.target.setSelectionRange(event.target.value.length, event.target.value.length)
-  }
-
   return (
     <>
       <Box display='flex' overflow='auto'>
@@ -71,7 +67,7 @@ export default function RichTextEditor({
         preview='edit'
         hideToolbar={hideToolbar}
         height={150}
-        textareaProps={{ ...richTextareaProps, onFocus: handleFocus }}
+        textareaProps={richTextareaProps}
         onChange={handleChange}
       />
     </>