feat: Ajout partie redux permettant sauvegarder shouldFocusField

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)

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({
 								<RuleInput
 									dottedName={currentQuestion}
 									onChange={onChange}
-									autoFocus
 									key={currentQuestion}
 									onSubmit={goToNextQuestion}
 								/>

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<Names extends string = DottedName>({
 	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<Names> = {
 		dottedName,
 		value,
@@ -94,9 +108,11 @@ export default function RuleInput<Names extends string = DottedName>({
 		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 ??

site/source/reducers/rootReducer.ts

@@ -73,6 +73,7 @@ export type Simulation = {
 	targetUnit: string
 	foldedSteps: Array<DottedName>
 	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

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