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

ngokevin · Jul 7, 2016 · d159db5 · d159db5
1 parent 94169e1
commit d159db5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/widgets/NumberWidget.js b/src/components/widgets/NumberWidget.js
@@ -106,7 +106,9 @@ export default class NumberWidget extends React.Component {
   }
 
   onChange = e => {
-    this.setState({value: e.target.value, displayValue: e.target.value});
+    const value = e.target.value;
+    this.setState({value: value, displayValue: value});
+    this.setValue(value);
   }
 
   onKeyDown = event => {
@@ -119,7 +121,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,14 @@ body {
 	overflow: hidden;
 }
 
+input[type="number"] {
+  appearance: none;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  appearance: none;
+}
+
 hr {
 	border: 0;
 	border-top: 1px solid #ccc;