From c8ccac62b1536ce1f956b7b3a28866a797f81e12 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Tue, 20 Nov 2018 19:34:45 +0100
Subject: [PATCH] Ajoute un debounce sur les champs de valeur dans les
 questions

---
 source/components/AnimatedTargetValue.js        |  4 ++--
 source/components/conversation/FormDecorator.js |  4 +---
 source/components/conversation/Input.js         | 14 +++++++++-----
 source/utils.js                                 | 10 +++++-----
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/source/components/AnimatedTargetValue.js b/source/components/AnimatedTargetValue.js
index aca14226a..b1bda7080 100644
--- a/source/components/AnimatedTargetValue.js
+++ b/source/components/AnimatedTargetValue.js
@@ -33,7 +33,7 @@ export default withLanguage(
 				})
 				this.previousValue = null
 				this.timeoutId = null
-			}, 200)
+			}, 250)
 		}
 		format = value => {
 			return value == null
@@ -73,7 +73,7 @@ class Evaporate extends PureComponent<{ children: string, style: Object }> {
 		return (
 			<ReactCSSTransitionGroup
 				transitionName="evaporate"
-				transitionEnterTimeout={1000}
+				transitionEnterTimeout={1300}
 				transitionLeaveTimeout={1}>
 				<span
 					key={this.props.children}
diff --git a/source/components/conversation/FormDecorator.js b/source/components/conversation/FormDecorator.js
index e1b8fd4ac..d1082a37e 100644
--- a/source/components/conversation/FormDecorator.js
+++ b/source/components/conversation/FormDecorator.js
@@ -43,18 +43,16 @@ export var FormDecorator = formType => RenderField =>
 			}
 			render() {
 				let {
-					setFormValue,
 					stepAction,
 					subquestion,
 					valueType,
 					defaultValue,
 					fieldName,
 					inversion,
+					setFormValue,
 					themeColours
 				} = this.props
-
 				let validate = buildValidationFunction(valueType)
-
 				let submit = cause => stepAction('fold', fieldName, cause),
 					stepProps = {
 						...this.props,
diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js
index 7eb714355..07a3220f0 100644
--- a/source/components/conversation/Input.js
+++ b/source/components/conversation/Input.js
@@ -3,6 +3,7 @@ import withColours from 'Components/utils/withColours'
 import { compose } from 'ramda'
 import React, { Component } from 'react'
 import { withI18n } from 'react-i18next'
+import { debounce } from '../../utils'
 import { FormDecorator } from './FormDecorator'
 import InputSuggestions from './InputSuggestions'
 import SendButton from './SendButton'
@@ -13,6 +14,7 @@ export default compose(
 	withColours
 )(
 	class Input extends Component {
+		debouncedOnChange = debounce(750, this.props.input.onChange)
 		render() {
 			let {
 					input,
@@ -27,16 +29,18 @@ export default compose(
 				suffixed = answerSuffix != null,
 				inputError = dirty && error,
 				submitDisabled = !dirty || inputError
-
 			return (
 				<span>
 					<div className="answer">
 						<input
-							ref={el => {
-								this.inputElement = el
-							}}
 							type="text"
-							{...input}
+							key={input.value}
+							autoFocus
+							defaultValue={input.value}
+							onChange={e => {
+								e.persist()
+								this.debouncedOnChange(e)
+							}}
 							className={classnames({ suffixed })}
 							id={'step-' + dottedName}
 							inputMode="numeric"
diff --git a/source/utils.js b/source/utils.js
index f80f5b52e..6a71efe7c 100644
--- a/source/utils.js
+++ b/source/utils.js
@@ -9,11 +9,11 @@ export let parseDataAttributes = (value: any) =>
 	value === 'undefined'
 		? undefined
 		: value === null
-			? null
-			: !isNaN(value)
-				? +value
-				: /* value is a normal string */
-				  value
+		? null
+		: !isNaN(value)
+		? +value
+		: /* value is a normal string */
+		  value
 
 export let getIframeOption = (optionName: string) => {
 	let url = getUrl(),