fix arrow controls for chrome hsl (#384)

casesandberg · Jul 23, 2017 · 5ff0808 · 5ff0808
1 parent 1167956
commit 5ff0808
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/components/chrome/ChromeFields.js b/src/components/chrome/ChromeFields.js
@@ -69,8 +69,8 @@ export class ChromeFields extends React.Component {
     } else if (data.h || data.s || data.l) {
       this.props.onChange({
         h: data.h || this.props.hsl.h,
-        s: data.s && (data.s).replace('%', '') || this.props.hsl.s,
-        l: data.l && (data.l).replace('%', '') || this.props.hsl.l,
+        s: (data.s && data.s) || this.props.hsl.s,
+        l: (data.l && data.l) || this.props.hsl.l,
         source: 'hsl',
       }, e)
     }

diff --git a/src/components/common/EditableInput.js b/src/components/common/EditableInput.js
@@ -43,7 +43,12 @@ export class EditableInput extends (PureComponent || Component) {
   }
 
   handleKeyDown = (e) => {
-    const number = Number(e.target.value)
+    // In case `e.target.value` is a percentage remove the `%` character
+    // and update accordingly with a percentage
+    // https://github.com/casesandberg/react-color/issues/383
+    const stringValue = String(e.target.value)
+    const isPercentage = stringValue.indexOf('%') > -1
+    const number = Number(stringValue.replace(/%/g, ''))
     if (!isNaN(number)) {
       const amount = this.props.arrowOffset || 1
 
@@ -55,7 +60,11 @@ export class EditableInput extends (PureComponent || Component) {
           this.props.onChange && this.props.onChange(number + amount, e)
         }
 
-        this.setState({ value: number + amount })
+        if (isPercentage) {
+          this.setState({ value: `${ number + amount }%` })
+        } else {
+          this.setState({ value: number + amount })
+        }
       }
 
       // Down
@@ -66,7 +75,11 @@ export class EditableInput extends (PureComponent || Component) {
           this.props.onChange && this.props.onChange(number - amount, e)
         }
 
-        this.setState({ value: number - amount })
+        if (isPercentage) {
+          this.setState({ value: `${ number - amount }%` })
+        } else {
+          this.setState({ value: number - amount })
+        }
       }
     }
   }
@@ -129,7 +142,7 @@ export class EditableInput extends (PureComponent || Component) {
           onChange={ this.handleChange }
           onBlur={ this.handleBlur }
           placeholder={ this.props.placeholder }
-		  spellCheck="false"
+          spellCheck="false"
         />
         { this.props.label ? (
           <span style={ styles.label } onMouseDown={ this.handleMouseDown }>