diff --git a/site/source/actions/actions.ts b/site/source/actions/actions.ts
index f8bbe43e3..5021c5813 100644
--- a/site/source/actions/actions.ts
+++ b/site/source/actions/actions.ts
@@ -20,6 +20,7 @@ export type Action =
| typeof deleteFromSituation
| typeof updateUnit
| typeof batchUpdateSituation
+ | typeof updateShouldFocusField
>
| CompanyCreationAction
| CompanyStatusAction
@@ -103,3 +104,9 @@ export const explainVariable = (variableName: DottedName | null = null) =>
type: 'EXPLAIN_VARIABLE',
variableName,
} as const)
+
+export const updateShouldFocusField = (shouldFocusField: boolean) =>
+ ({
+ type: 'UPDATE_SHOULDFOCUSFIELD',
+ shouldFocusField,
+ } as const)
diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx
index 55d9dbc42..6ca45d3e9 100644
--- a/site/source/components/conversation/Conversation.tsx
+++ b/site/source/components/conversation/Conversation.tsx
@@ -2,6 +2,7 @@ import {
deleteFromSituation,
goToQuestion,
stepAction,
+ updateShouldFocusField,
updateSituation,
} from '@/actions/actions'
import RuleInput from '@/components/conversation/RuleInput'
@@ -52,7 +53,10 @@ export default function Conversation({
dispatch(goToQuestion(currentQuestion))
}
}, [dispatch, currentQuestion])
- const goToNextQuestion = () => dispatch(stepAction(currentQuestion))
+ const goToNextQuestion = () => {
+ dispatch(updateShouldFocusField(true))
+ dispatch(stepAction(currentQuestion))
+ }
const goToPrevious = () =>
dispatch(goToQuestion(previousAnswers.slice(-1)[0]))
@@ -104,7 +108,6 @@ export default function Conversation({
diff --git a/site/source/components/conversation/RuleInput.tsx b/site/source/components/conversation/RuleInput.tsx
index c42f61acb..2a7be68ee 100644
--- a/site/source/components/conversation/RuleInput.tsx
+++ b/site/source/components/conversation/RuleInput.tsx
@@ -1,6 +1,8 @@
+import { updateShouldFocusField } from '@/actions/actions'
import NumberInput from '@/components/conversation/NumberInput'
import SelectCommune from '@/components/conversation/select/SelectCommune'
import { EngineContext } from '@/components/utils/EngineContext'
+import { shouldFocusFieldSelector } from '@/selectors/simulationSelectors'
import { getMeta } from '@/utils'
import { DottedName } from 'modele-social'
import Engine, {
@@ -11,7 +13,8 @@ import Engine, {
reduceAST,
RuleNode,
} from 'publicodes'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
import { Choice, MultipleAnswerInput, OuiNonInput } from './ChoicesInput'
import DateInput from './DateInput'
import ParagrapheInput from './ParagrapheInput'
@@ -80,6 +83,17 @@ export default function RuleInput({
const rule = engine.getRule(dottedName)
const evaluation = engine.evaluate({ valeur: dottedName, ...modifiers })
const value = evaluation.nodeValue
+ const dispatch = useDispatch()
+ const shouldFocusField = useSelector(shouldFocusFieldSelector)
+
+ useEffect(() => {
+ setTimeout(() => {
+ dispatch(updateShouldFocusField(false))
+ }, 0)
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
const commonProps: InputProps = {
dottedName,
value,
@@ -94,9 +108,11 @@ export default function RuleInput({
id: props.id ?? dottedName,
question: rule.rawNode.question,
suggestions: showSuggestions ? rule.suggestions : {},
+ autoFocus: shouldFocusField,
...props,
}
const meta = getMeta<{ affichage?: string }>(rule.rawNode, {})
+
if (getVariant(engine.getRule(dottedName))) {
const type =
inputType ??
diff --git a/site/source/reducers/rootReducer.ts b/site/source/reducers/rootReducer.ts
index 17be2d1ff..b5f20e8f6 100644
--- a/site/source/reducers/rootReducer.ts
+++ b/site/source/reducers/rootReducer.ts
@@ -73,6 +73,7 @@ export type Simulation = {
targetUnit: string
foldedSteps: Array
unfoldedStep?: DottedName | null
+ shouldFocusField: boolean
}
function simulation(
@@ -90,6 +91,7 @@ function simulation(
targetUnit: config['unité par défaut'] || '€/mois',
foldedSteps: [],
unfoldedStep: null,
+ shouldFocusField: false,
}
}
@@ -170,6 +172,12 @@ function simulation(
...state,
targetUnit: action.targetUnit,
}
+
+ case 'UPDATE_SHOULDFOCUSFIELD':
+ return {
+ ...state,
+ shouldFocusField: action.shouldFocusField,
+ }
}
return state
diff --git a/site/source/selectors/simulationSelectors.ts b/site/source/selectors/simulationSelectors.ts
index 04c4c3d8b..ecaaa0e0c 100644
--- a/site/source/selectors/simulationSelectors.ts
+++ b/site/source/selectors/simulationSelectors.ts
@@ -47,3 +47,6 @@ export const currentQuestionSelector = (state: RootState) =>
export const answeredQuestionsSelector = (state: RootState) =>
state.simulation?.foldedSteps ?? []
+
+export const shouldFocusFieldSelector = (state: RootState) =>
+ state.simulation?.shouldFocusField ?? false