use number input for number widget (fixes aframevr#29)

ngokevin · Jul 7, 2016 · 0152cba · 0152cba
1 parent a8d9e4e
commit 0152cba
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/widgets/NumberWidget.js b/src/components/widgets/NumberWidget.js
@@ -107,6 +107,7 @@ export default class NumberWidget extends React.Component {
 
   onChange = e => {
     this.setState({value: e.target.value, displayValue: e.target.value});
+    this.setValue(parseFloat(e.target.value));
   }
 
   onKeyDown = event => {
@@ -119,7 +120,7 @@ export default class NumberWidget extends React.Component {
 
   render () {
     return (
-      <input ref='input' className='number' type='text'
+      <input ref='input' className='number' type='number'
         value={this.state.displayValue}
         onKeyDown={this.onKeyDown}
         onChange={this.onChange}

diff --git a/src/css/main.css b/src/css/main.css
@@ -5,6 +5,13 @@ body {
 	overflow: hidden;
 }
 
+// Hide number input arrow buttons.
+input[type="number"],
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  appearance: none;
+}
+
 hr {
 	border: 0;
 	border-top: 1px solid #ccc;