From dc4500d6ebdd1dd646c572e8fa8f4b5f4272a56c Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Wed, 17 Jan 2018 18:34:58 +0100
Subject: [PATCH] =?UTF-8?q?Suggestions=20vraiment=20ins=C3=A9r=C3=A9es=20a?=
 =?UTF-8?q?u=20clic=20seulement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/conversation/Input.js       | 25 +++++++++++--------
 .../components/conversation/conversation.css  |  7 +++---
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js
index 50162c065..6e6a77b94 100644
--- a/source/components/conversation/Input.js
+++ b/source/components/conversation/Input.js
@@ -8,7 +8,7 @@ import SendButton from './SendButton'
 @FormDecorator('input')
 export default class Input extends Component {
 	state = {
-		hoverSuggestion: null
+		lastValue: ''
 	}
 	render() {
 		let {
@@ -20,7 +20,6 @@ export default class Input extends Component {
 			answerSuffix = valueType.suffix,
 			suffixed = answerSuffix != null,
 			inputError = dirty && error,
-			{ hoverSuggestion } = this.state,
 			submitDisabled = !dirty || inputError
 
 		return (
@@ -33,7 +32,6 @@ export default class Input extends Component {
 						}}
 						type="text"
 						{...input}
-						value={hoverSuggestion != null ? hoverSuggestion : input.value}
 						className={classnames({ suffixed })}
 						id={'step-' + dottedName}
 						{...attributes}
@@ -104,7 +102,7 @@ export default class Input extends Component {
 		)
 	}
 	renderSuggestions(themeColours) {
-		let { setFormValue, submit, suggestions, inverted } = this.props.stepProps
+		let { setFormValue, suggestions, inverted } = this.props.stepProps
 
 		if (!suggestions || inverted) return null
 		return (
@@ -114,16 +112,21 @@ export default class Input extends Component {
 					{toPairs(suggestions).map(([text, value]) => (
 						<li
 							key={value}
-							onClick={e =>
-								setFormValue('' + value) && submit() && e.preventDefault()
+							onClick={() => {
+								this.setState({ lastValue: null })
+								setFormValue('' + value)
+							}}
+							onMouseOver={() => {
+								this.setState({ lastValue: this.props.input.value })
+								setFormValue('' + value)
+							}}
+							onMouseOut={() =>
+								this.state.lastValue != null &&
+								setFormValue('' + this.state.lastValue)
 							}
-							onMouseOver={() => this.setState({ hoverSuggestion: value })}
-							onMouseOut={() => this.setState({ hoverSuggestion: null })}
 							style={{ color: themeColours.textColourOnWhite }}
 						>
-							<a href="#" title="cliquer pour valider">
-								{text}
-							</a>
+							<span title="cliquez pour insérer cette suggestion">{text}</span>
 						</li>
 					))}
 				</ul>
diff --git a/source/components/conversation/conversation.css b/source/components/conversation/conversation.css
index 87623988d..f4a67d11c 100644
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@@ -315,7 +315,7 @@
 	font-style: italic;
 	float: right;
 	clear: right;
-	font-size: 70%;
+	font-size: 75%;
 	color: #222;
 }
 .step .inputSuggestions ul {
@@ -326,11 +326,12 @@
 }
 .step .inputSuggestions li {
 }
-.step .inputSuggestions a {
+.step .inputSuggestions span {
 	padding: 0.1em 0.9em;
 	font-weight: 600;
+	cursor: pointer;
 }
-.step .inputSuggestions a:hover {
+.step .inputSuggestions span:hover {
 	text-decoration: none;
 }