From 79474bf42a9a5ddc5ae945549ed0db18d2b376a7 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 21 Mar 2018 18:35:15 +0100
Subject: [PATCH] :bug: Changement de salaire saisi fonctionnel...

... mais moche en termes d'UX, car ca efface tout avant la nouvelle
saisie
---
 source/components/TargetSelection.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js
index 12127e22a..a0fd86210 100644
--- a/source/components/TargetSelection.js
+++ b/source/components/TargetSelection.js
@@ -5,7 +5,7 @@ import { rules, findRuleByName } from 'Engine/rules'
 import { propEq, contains, without, curry, append, ifElse } from 'ramda'
 import './TargetSelection.css'
 import BlueButton from './BlueButton'
-import { Field, reduxForm, formValueSelector } from 'redux-form'
+import { Field, reduxForm, formValueSelector, change } from 'redux-form'
 import { connect } from 'react-redux'
 import { RuleValue } from './rule/RuleValueVignette'
 import classNames from 'classnames'
@@ -26,6 +26,7 @@ export let popularTargetNames = [...salaries, 'aides employeur']
 		conversationTargetNames: state.conversationTargetNames
 	}),
 	dispatch => ({
+		clearFormValue: field => dispatch(change('conversation', field, '')),
 		setConversationTargets: (targetNames, fromScratch = false) =>
 			dispatch({ type: 'SET_CONVERSATION_TARGETS', targetNames, fromScratch })
 	})
@@ -143,13 +144,15 @@ export default class TargetSelection extends Component {
 									}
 									<span className="optionTitle">{s.title || s.name}</span>
 								</label>
-								<TargetOrInputValue
+								<TargetInputOrValue
 									{...{
 										s,
 										targets: this.props.targets,
 										firstEstimationComplete: this.firstEstimationComplete,
 										activeInput: this.state.activeInput,
-										setActiveInput: name => this.setState({ activeInput: name })
+										setActiveInput: name =>
+											this.setState({ activeInput: name }),
+										clearFormValue: this.props.clearFormValue
 									}}
 								/>
 							</div>
@@ -168,12 +171,13 @@ let InputComponent = ({ input, meta: { dirty, error } }) => (
 		<input type="number" {...input} autoFocus />
 	</span>
 )
-let TargetOrInputValue = ({
+let TargetInputOrValue = ({
 	s,
 	targets,
 	firstEstimationComplete,
 	activeInput,
-	setActiveInput
+	setActiveInput,
+	clearFormValue
 }) => (
 	<span className="targetInputOrValue">
 		{activeInput === s.dottedName ? (
@@ -191,7 +195,9 @@ let TargetOrInputValue = ({
 						attractClick: s.question && targets.length === 0
 					})}
 					onClick={() => {
-						s.question && setActiveInput(s.dottedName)
+						if (!s.question) return
+						activeInput && clearFormValue(activeInput)
+						setActiveInput(s.dottedName)
 					}}
 				>
 					{do {
@@ -205,6 +211,3 @@ let TargetOrInputValue = ({
 		{(firstEstimationComplete || s.question) && <span className="unit">€</span>}
 	</span>
 )
-
-/* 
-						*/