Fix focus

site/source/components/conversation/Conversation.tsx

@@ -1,6 +1,6 @@
 import { DottedName } from 'modele-social'
 import Engine, { PublicodesExpression } from 'publicodes'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -50,8 +50,12 @@ export default function Conversation({
 
 	const { t } = useTranslation()
 
-	const { currentQuestion, currentQuestionIsAnswered, goToPrevious, goToNext } =
-		useNavigateQuestions(engines)
+	const {
+		currentQuestion,
+		currentQuestionIsAnswered,
+		goToPrevious: goToPreviousQuestion,
+		goToNext: goToNextQuestion,
+	} = useNavigateQuestions(engines)
 
 	const onChange = (
 		value: PublicodesExpression | undefined,
@@ -63,6 +67,26 @@ export default function Conversation({
 	const [firstRenderDone, setFirstRenderDone] = useState(false)
 	useEffect(() => setFirstRenderDone(true), [])
 
+	const focusFirstElemInForm = useCallback(() => {
+		formRef.current
+			?.querySelector<HTMLInputElement | HTMLButtonElement | HTMLLinkElement>(
+				'input, button, a'
+			)
+			?.focus()
+	}, [])
+
+	const goToPrevious = useCallback(() => {
+		goToPreviousQuestion()
+		focusFirstElemInForm()
+	}, [focusFirstElemInForm, goToPreviousQuestion])
+
+	const goToNext = useCallback(() => {
+		goToNextQuestion()
+		focusFirstElemInForm()
+	}, [focusFirstElemInForm, goToNextQuestion])
+
+	const formRef = React.useRef<HTMLFormElement>(null)
+
 	return (
 		<>
 			<div className="print-only">
@@ -85,6 +109,7 @@ export default function Conversation({
 								e.preventDefault()
 								goToNext()
 							}}
+							ref={formRef}
 						>
 							<div
 								css={`

site/source/components/conversation/RuleInput.tsx

@@ -12,7 +12,6 @@ import React, { useContext } from 'react'
 import NumberInput from '@/components/conversation/NumberInput'
 import SelectCommune from '@/components/conversation/select/SelectCommune'
 import { EngineContext } from '@/components/utils/EngineContext'
-import { useShouldFocusField } from '@/hooks/useShouldFocusField'
 import { getMeta } from '@/utils'
 
 import { Choice, MultipleAnswerInput, OuiNonInput } from './ChoicesInput'
@@ -92,7 +91,6 @@ export default function RuleInput<Names extends string = DottedName>({
 	const rule = engineValue.getRule(dottedName)
 	const evaluation = engineValue.evaluate({ valeur: dottedName, ...modifiers })
 	const value = evaluation.nodeValue
-	const shouldFocusField = useShouldFocusField()
 
 	const commonProps: InputProps<Names> = {
 		dottedName,
@@ -107,7 +105,6 @@ export default function RuleInput<Names extends string = DottedName>({
 		description: rule.rawNode.description,
 		question: rule.rawNode.question,
 		suggestions: showSuggestions ? rule.suggestions : {},
-		autoFocus: shouldFocusField,
 		engine: engineValue,
 		...props,
 		// Les espaces ne sont pas autorisés dans un id, les points sont assimilés à une déclaration de class CSS par Cypress

site/source/hooks/useShouldFocusField.ts

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { updateShouldFocusField } from '@/store/actions/actions'
 import { shouldFocusFieldSelector } from '@/store/selectors/simulationSelectors'
 
+// TODO: remove this hook, is not used anymore
 export const useShouldFocusField = () => {
 	const dispatch = useDispatch()
 	const shouldFocusField = useSelector(shouldFocusFieldSelector)

site/source/pages/simulateurs/salarié/Salarié.tsx

@@ -233,19 +233,20 @@ function TitreRestaurant() {
 
 	return (
 		<Condition expression={`${dottedName} > 0`}>
-			<StyledInfo>
-				<FromTop>
+			<FromTop>
+				<StyledInfo>
 					<RuleLink dottedName={dottedName}>
 						+{' '}
 						<Value
 							expression={dottedName}
 							displayedUnit="€"
 							unit={targetUnit}
-						/>
+							linkToRule={false}
+						/>{' '}
 						<Trans>en titres-restaurant</Trans> <Emoji emoji=" 🍽" />
 					</RuleLink>
-				</FromTop>
-			</StyledInfo>
+				</StyledInfo>
+			</FromTop>
 		</Condition>
 	)
 }
@@ -278,20 +279,21 @@ function AidesGlimpse() {
 
 	return (
 		<Condition expression={`${dottedName} > 0`}>
-			<StyledInfo>
-				<FromTop>
+			<FromTop>
+				<StyledInfo>
 					<RuleLink dottedName={aideLink}>
 						<Trans>en incluant</Trans>{' '}
 						<Value
 							expression={dottedName}
 							displayedUnit="€"
 							unit={targetUnit}
+							linkToRule={false}
 						/>{' '}
 						<Trans>d'aides</Trans>{' '}
 						<Emoji emoji={aides.rawNode.icônes as string} />
 					</RuleLink>
-				</FromTop>
-			</StyledInfo>
+				</StyledInfo>
+			</FromTop>
 		</Condition>
 	)
 }