diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx index 2d177b557..97e24ace8 100644 --- a/site/source/components/conversation/Conversation.tsx +++ b/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( + 'input, button, a' + ) + ?.focus() + }, []) + + const goToPrevious = useCallback(() => { + goToPreviousQuestion() + focusFirstElemInForm() + }, [focusFirstElemInForm, goToPreviousQuestion]) + + const goToNext = useCallback(() => { + goToNextQuestion() + focusFirstElemInForm() + }, [focusFirstElemInForm, goToNextQuestion]) + + const formRef = React.useRef(null) + return ( <>
@@ -85,6 +109,7 @@ export default function Conversation({ e.preventDefault() goToNext() }} + ref={formRef} >
({ const rule = engineValue.getRule(dottedName) const evaluation = engineValue.evaluate({ valeur: dottedName, ...modifiers }) const value = evaluation.nodeValue - const shouldFocusField = useShouldFocusField() const commonProps: InputProps = { dottedName, @@ -107,7 +105,6 @@ export default function RuleInput({ 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 diff --git a/site/source/hooks/useShouldFocusField.ts b/site/source/hooks/useShouldFocusField.ts index 92cbda960..7f8e3b925 100644 --- a/site/source/hooks/useShouldFocusField.ts +++ b/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) diff --git a/site/source/pages/simulateurs/salarié/Salarié.tsx b/site/source/pages/simulateurs/salarié/Salarié.tsx index 5884361cf..80ee63c35 100644 --- a/site/source/pages/simulateurs/salarié/Salarié.tsx +++ b/site/source/pages/simulateurs/salarié/Salarié.tsx @@ -233,19 +233,20 @@ function TitreRestaurant() { return ( 0`}> - - + + +{' '} + linkToRule={false} + />{' '} en titres-restaurant - - + + ) } @@ -278,20 +279,21 @@ function AidesGlimpse() { return ( 0`}> - - + + en incluant{' '} {' '} d'aides{' '} - - + + ) }