Merge pull request #122 from sgmap/bug-suggestions

Bug des suggestions qui écrasent les valeurs saisies

source/components/conversation/Input.js

@@ -1,53 +1,68 @@
-import React, {Component} from 'react'
-import {FormDecorator} from './FormDecorator'
+import React, { Component } from 'react'
+import { FormDecorator } from './FormDecorator'
 import classnames from 'classnames'
 import R from 'ramda'
 
 @FormDecorator('input')
 export default class Input extends Component {
 	state = {
-		suggestedInput: false
+		hoverSuggestion: null
 	}
 	render() {
 		let {
-			name,
-			input,
-			stepProps: {attributes, submit, valueType, suggestions},
-			meta: {
-				touched, error, active,
-			},
-			themeColours,
-		} = this.props,
+				name,
+				input,
+				stepProps: { attributes, submit, valueType, suggestions },
+				meta: { touched, error, active },
+				themeColours
+			} = this.props,
 			answerSuffix = valueType.suffix,
 			suffixed = answerSuffix != null,
 			inputError = touched && error,
-			sendButtonDisabled = this.state.suggestedInput || !input.value || inputError
+			{hoverSuggestion} = this.state,
+			sendButtonDisabled =
+				input.value == null || input.value == '' || inputError
 
-		if (typeof suggestions == 'string')
-			return <Select />
+		if (typeof suggestions == 'string') return <Select />
 		return (
 			<span>
 				<span className="answer">
 					<input
-						type="text" {...input}
-						className={classnames({suffixed})}
+						type="text"
+						{...input}
+						value={hoverSuggestion != null ? hoverSuggestion : input.value}
+						className={classnames({ suffixed })}
 						id={'step-' + name}
 						{...attributes}
-						style={!active ? {border: '2px dashed #ddd'} : {border: '1px solid #ddd'}}
-						onKeyDown={({key}) =>
-							key == 'Enter' && input.value && (
-							!error ?
-								submit() :
-								input.onBlur() // blur will trigger the error
-						)}
-						/>
-					{ suffixed &&
-						<label className="suffix" htmlFor={'step-' + name} style={!active ? {color: '#888'} : {color: '#222'}}>
+						style={
+							!active
+								? { border: '2px dashed #ddd' }
+								: { border: '1px solid #ddd' }
+						}
+						onKeyDown={({ key }) =>
+							key == 'Enter' &&
+							input.value &&
+							(!error ? submit() : input.onBlur()) // blur will trigger the error
+						}
+					/>
+					{suffixed && (
+						<label
+							className="suffix"
+							htmlFor={'step-' + name}
+							style={!active ? { color: '#888' } : { color: '#222' }}
+						>
 							{answerSuffix}
 						</label>
-					}
-					<button className="send" style={{visibility: sendButtonDisabled ? 'hidden' : 'visible', color: themeColours.textColour, background: themeColours.colour}}
-						onClick={() => !error ? submit() : null} >
+					)}
+					<button
+						className="send"
+						style={{
+							visibility: sendButtonDisabled ? 'hidden' : 'visible',
+							color: themeColours.textColour,
+							background: themeColours.colour
+						}}
+						onClick={() => (!error ? submit() : null)}
+					>
 						<span className="text">valider</span>
 						<span className="icon">&#10003;</span>
 					</button>
@@ -59,22 +74,29 @@ export default class Input extends Component {
 			</span>
 		)
 	}
-	renderSuggestions(themeColours){
-		let {setFormValue, submit, suggestions} = this.props.stepProps
+	renderSuggestions(themeColours) {
+		let { setFormValue, submit, suggestions, input } = this.props.stepProps
 		if (!suggestions) return null
 		return (
-			<span className="inputSuggestions">suggestions:
-			<ul>
-			{R.toPairs(suggestions).map(([text, value]) =>
-				<li key={value}
-					onClick={e => setFormValue('' + value) && submit() && e.preventDefault()}
-					onMouseOver={() => setFormValue('' + value) && this.setState({suggestedInput: true})}
-					onMouseOut={() => setFormValue('') && this.setState({suggestedInput: false})}
-					style={{color: themeColours.colour}}>
-					<a href="#" title="cliquer pour valider">{text}</a>
-				</li>
-			)}
-			</ul>
-		</span>)
+			<span className="inputSuggestions">
+				suggestions:
+				<ul>
+					{R.toPairs(suggestions).map(([text, value]) => (
+						<li
+							key={value}
+							onClick={e =>
+								setFormValue('' + value) && submit() && e.preventDefault()}
+							onMouseOver={() => this.setState({ hoverSuggestion: value })}
+							onMouseOut={() => this.setState({ hoverSuggestion: null })}
+							style={{ color: themeColours.colour }}
+						>
+							<a href="#" title="cliquer pour valider">
+								{text}
+							</a>
+						</li>
+					))}
+				</ul>
+			</span>
+		)
 	}
 }

source/components/conversation/conversation.css

@@ -302,10 +302,9 @@ fieldset > .ignore {
 	align-items: flex-end;
 }
 .step .inputSuggestions li {
-	margin-left: .6em;
 }
 .step .inputSuggestions a {
-	padding: .1em .6em;
+	padding: .1em .9em;
 	font-weight: 600;
 }
 .step .inputSuggestions a:hover {