Fix focus in interview

rdmorganiser · May 17, 2024 · 73a5f1c · 73a5f1c
1 parent e483d7e
commit 73a5f1c
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 28 deletions.
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -13,7 +13,7 @@ import { updateLocation } from '../utils/location'
 import { updateOptions } from '../utils/options'
 import { initPage } from '../utils/page'
 import { gatherSets, getDescendants, initSets } from '../utils/set'
-import { gatherDefaultValues, initValues } from '../utils/value'
+import { activateFirstValue, gatherDefaultValues, initValues } from '../utils/value'
 import projectId from '../utils/projectId'
 
 import ValueFactory from '../factories/ValueFactory'
@@ -159,6 +159,8 @@ export function fetchValues(page) {
         initSets(sets, page)
         initValues(sets, values, page)
 
+        activateFirstValue(page, values)
+
         dispatch(resolveConditions(page, sets))
         dispatch(fetchValuesSuccess(values, sets))
       })
@@ -276,6 +278,9 @@ export function storeValueError(error, valueIndex) {
 export function createValue(attrs, store) {
   const value = ValueFactory.create(attrs)
 
+  // focus the new value
+  value.focus = true
+
   if (isNil(store)) {
     return {type: CREATE_VALUE, value}
   } else {

diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -50,7 +50,6 @@ const Page = ({ config, templates, overview, page, sets, values, fetchPage,
                     values={values.filter((value) => element.attributes.includes(value.attribute))}
                     disabled={overview.read_only}
                     isManager={isManager}
-                    focus={elementIndex == 0}
                     parentSet={currentSet}
                     createSet={createSet}
                     updateSet={updateSet}
@@ -73,7 +72,6 @@ const Page = ({ config, templates, overview, page, sets, values, fetchPage,
                     ))}
                     disabled={overview.read_only}
                     isManager={isManager}
-                    focus={elementIndex == 0}
                     currentSet={currentSet}
                     createValue={createValue}
                     updateValue={updateValue}

diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js b/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js
@@ -38,7 +38,7 @@ const PageHeadFormModal = ({ title, show, initial, onClose, onSubmit }) => {
   }, [inputValue])
 
   // focus when the modal is shown
-  useFocusEffect(ref, [show])
+  useFocusEffect(ref, show)
 
   return (
     <Modal title={title} show={show} submitText={submitText} submitColor={submitColor}

diff --git a/rdmo/projects/assets/js/interview/components/main/question/Question.js b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -11,7 +11,7 @@ import QuestionText from './QuestionText'
 import QuestionWarning from './QuestionWarning'
 import QuestionWidget from './QuestionWidget'
 
-const Question = ({ templates, question, values, disabled, isManager, focus,
+const Question = ({ templates, question, values, disabled, isManager,
                     currentSet, createValue, updateValue, deleteValue }) => {
   return checkQuestion(question, currentSet) && (
     <div className={`interview-question col-md-${question.width || '12'}`}>
@@ -25,7 +25,6 @@ const Question = ({ templates, question, values, disabled, isManager, focus,
         question={question}
         values={values}
         disabled={disabled}
-        focus={focus}
         currentSet={currentSet}
         createValue={createValue}
         updateValue={updateValue}
@@ -41,7 +40,6 @@ Question.propTypes = {
   values: PropTypes.array.isRequired,
   disabled: PropTypes.bool.isRequired,
   isManager: PropTypes.bool.isRequired,
-  focus: PropTypes.bool.isRequired,
   currentSet: PropTypes.object.isRequired,
   createValue: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,

diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
@@ -11,7 +11,7 @@ import QuestionSetAddSetHelp from './QuestionSetAddSetHelp'
 import QuestionSetHelp from './QuestionSetHelp'
 import QuestionSetRemoveSet from './QuestionSetRemoveSet'
 
-const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager, focus,
+const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager,
                        parentSet, createSet, updateSet, deleteSet,
                        createValue, updateValue, deleteValue }) => {
 
@@ -47,7 +47,6 @@ const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager
                             values={values.filter((value) => element.attributes.includes(value.attribute))}
                             disabled={disabled}
                             isManager={isManager}
-                            focus={focus && (setIndex === 0 && elementIndex === 0)}
                             parentSet={set}
                             createSet={createSet}
                             updateSet={updateSet}
@@ -70,7 +69,6 @@ const QuestionSet = ({ templates, questionset, sets, values, disabled, isManager
                             ))}
                             disabled={disabled}
                             isManager={isManager}
-                            focus={focus && (setIndex === 0 && elementIndex === 0)}
                             currentSet={set}
                             createValue={createValue}
                             updateValue={updateValue}
@@ -99,7 +97,6 @@ QuestionSet.propTypes = {
   values: PropTypes.array.isRequired,
   disabled: PropTypes.bool.isRequired,
   isManager: PropTypes.bool.isRequired,
-  focus: PropTypes.bool.isRequired,
   parentSet: PropTypes.object.isRequired,
   createSet: PropTypes.func.isRequired,
   updateSet: PropTypes.func.isRequired,

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -9,12 +9,12 @@ import useFocusEffect from '../../../hooks/useFocusEffect'
 
 import Unit from './common/Unit'
 
-const TextInput = ({ question, value, disabled, focus, updateValue, buttons }) => {
+const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
   const ref = useRef(null)
   const [inputValue, setInputValue] = useState('')
 
   useEffect(() => {setInputValue(value.text)}, [value.text])
-  useFocusEffect(ref, [value.text], focus)
+  useFocusEffect(ref, value.focus)
 
   const handleChange = useDebouncedCallback((value, text) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
@@ -50,7 +50,6 @@ TextInput.propTypes = {
   question: PropTypes.object.isRequired,
   value: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
-  focus: PropTypes.bool,
   updateValue: PropTypes.func.isRequired,
   buttons: PropTypes.node.isRequired
 }

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
@@ -8,7 +8,7 @@ import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
 import TextInput from './TextInput'
 
-const TextWidget = ({ question, values, currentSet, disabled, focus, createValue, updateValue, deleteValue }) => {
+const TextWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-widgets">
       {
@@ -19,7 +19,6 @@ const TextWidget = ({ question, values, currentSet, disabled, focus, createValue
                 question={question}
                 value={value}
                 disabled={disabled}
-                focus={focus && valueIndex == values.length - 1}
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
@@ -54,7 +53,6 @@ TextWidget.propTypes = {
   question: PropTypes.object.isRequired,
   values: PropTypes.array.isRequired,
   disabled: PropTypes.bool,
-  focus: PropTypes.bool,
   currentSet: PropTypes.object.isRequired,
   createValue: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
@@ -9,12 +9,12 @@ import useFocusEffect from '../../../hooks/useFocusEffect'
 
 import Unit from './common/Unit'
 
-const TextareaInput = ({ question, value, disabled, focus, updateValue, buttons }) => {
+const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
   const ref = useRef(null)
   const [inputValue, setInputValue] = useState('')
 
   useEffect(() => {setInputValue(value.text)}, [value.text])
-  useFocusEffect(ref, [value.text], focus)
+  useFocusEffect(ref, value.focus)
 
   const handleChange = useDebouncedCallback((value, text) => {
     updateValue(value, { text, unit: question.unit, value_type: question.value_type })
@@ -50,7 +50,6 @@ TextareaInput.propTypes = {
   question: PropTypes.object.isRequired,
   value: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
-  focus: PropTypes.bool,
   updateValue: PropTypes.func.isRequired,
   buttons: PropTypes.node.isRequired
 }

diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
@@ -8,7 +8,7 @@ import QuestionRemoveValue from '../question/QuestionRemoveValue'
 
 import TextareaInput from './TextareaInput'
 
-const TextareaWidget = ({ question, values, currentSet, disabled, focus, createValue, updateValue, deleteValue }) => {
+const TextareaWidget = ({ question, values, currentSet, disabled, createValue, updateValue, deleteValue }) => {
   return (
     <div className="interview-widgets">
       {
@@ -19,7 +19,6 @@ const TextareaWidget = ({ question, values, currentSet, disabled, focus, createV
                 question={question}
                 value={value}
                 disabled={disabled}
-                focus={focus && valueIndex == values.length - 1}
                 updateValue={updateValue}
                 buttons={
                   <div className="buttons">
@@ -54,7 +53,6 @@ TextareaWidget.propTypes = {
   question: PropTypes.object.isRequired,
   values: PropTypes.array.isRequired,
   disabled: PropTypes.bool,
-  focus: PropTypes.bool,
   currentSet: PropTypes.object.isRequired,
   createValue: PropTypes.func.isRequired,
   updateValue: PropTypes.func.isRequired,

diff --git a/rdmo/projects/assets/js/interview/hooks/useFocusEffect.js b/rdmo/projects/assets/js/interview/hooks/useFocusEffect.js
@@ -2,9 +2,9 @@ import { isNil } from 'lodash'
 
 import { useEffect } from 'react'
 
-const useFocusEffect = (ref, dependencies, focus) => {
+const useFocusEffect = (ref, show) => {
   useEffect(() => {
-    if ((isNil(focus) || focus) && !isNil(ref.current)) {
+    if (show && !isNil(ref.current)) {
       const timeout = setTimeout(() => {
         ref.current.focus()
       }, 200)
@@ -14,7 +14,7 @@ const useFocusEffect = (ref, dependencies, focus) => {
         clearTimeout(timeout)
       }
     }
-  }, [...dependencies, isNil(focus) || focus])
+  }, [show])
 }
 
 export default useFocusEffect
diff --git a/rdmo/projects/assets/js/interview/utils/value.js b/rdmo/projects/assets/js/interview/utils/value.js
@@ -1,4 +1,4 @@
-import { isNil, isEmpty, toString } from 'lodash'
+import { get, first, isNil, isEmpty, toString, sortBy } from 'lodash'
 
 import ValueFactory from '../factories/ValueFactory'
 
@@ -76,4 +76,14 @@ const initRange = (question, value) => {
   }
 }
 
-export { isDefaultValue, gatherDefaultValues, initValues, initRange }
+const activateFirstValue = (page, values) => {
+  const attribute = get(page, 'questions.0.attribute')
+  if (!isNil(attribute)) {
+    const value = first(sortBy(values.filter((value) => value.attribute == attribute), 'collection_index'))
+    if (!isNil(value)) {
+      value.focus = true
+    }
+  }
+}
+
+export { isDefaultValue, gatherDefaultValues, initValues, initRange, activateFirstValue }