IE 11 fixes

Author: jvorcak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webscopeio/react-console",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React component that emulates console behaviour",
   "author": "jvorcak",
   "license": "MIT",

src/index.tsx

@@ -17,11 +17,11 @@ export type Props = {
 type State = {
   output: Array<string>,
   commandInProgress: boolean,
+  input: string,
 }
 
 export default class ReactConsole extends React.Component<Props, State> {
 
-  formRef: any = null;
   inputRef: any = null;
   wrapperRef: any = null;
 
@@ -31,6 +31,7 @@ export default class ReactConsole extends React.Component<Props, State> {
   };
 
   state = {
+    input: '',
     output: [],
     commandInProgress: false,
   };
@@ -44,33 +45,29 @@ export default class ReactConsole extends React.Component<Props, State> {
     }
   }
 
-
-  scrollToBottom = () => {
-    this.wrapperRef.scrollTo(0, this.wrapperRef.scrollHeight)
-  };
-
   onSubmit = async (e: any) => {
-    const {prompt} = this.props
+    const {prompt} = this.props;
     e.preventDefault();
-    const data = new FormData(e.target);
-    const inputString: string = data.get('input') as string;
+
+    const inputString: string = this.state.input
     if (inputString === null) {
       return
     }
 
     const log = `${prompt}\xa0${inputString}`;
 
     if(inputString === '') {
-      this.setState({ output: [...this.state.output, log]})
-      this.formRef.reset()
+      this.setState({
+        output: [...this.state.output, log],
+        input: '',
+      });
       return
     }
 
     const [cmd, ...args] = inputString.split(" ");
 
     if(cmd === 'clear') {
-      this.formRef.reset()
-      this.setState({output: []})
+      this.setState({output: [], input: ''})
       return
     }
 
@@ -88,15 +85,13 @@ export default class ReactConsole extends React.Component<Props, State> {
       } catch (err) {
 
       }
-      this.scrollToBottom()
 
     } else {
       this.setState({
         output: [...this.state.output, log, `Command '${cmd}' does not exist`]
-      }, this.scrollToBottom)
+      })
     }
-    this.formRef.reset()
-    this.setState({commandInProgress: false});
+    this.setState({commandInProgress: false, input: ''});
     this.inputRef.focus()
   };
 
@@ -114,7 +109,6 @@ export default class ReactConsole extends React.Component<Props, State> {
           )}
         </div>
         <form
-          ref={ref => this.formRef = ref}
           onSubmit={this.onSubmit}
         >
           <div className={styles.promptWrapper}>
@@ -123,6 +117,8 @@ export default class ReactConsole extends React.Component<Props, State> {
               disabled={this.state.commandInProgress}
               ref={ref => this.inputRef = ref}
               autoFocus={autoFocus}
+              value={this.state.input}
+              onChange={this.onInputChange}
               autoComplete={'off'}
               spellCheck={false}
               autoCapitalize={'false'}
@@ -135,6 +131,12 @@ export default class ReactConsole extends React.Component<Props, State> {
     )
   }
 
+  onInputChange = (e: any) => {
+    this.setState({
+      input: e.target.value,
+    })
+  }
+
   focusConsole = () => {
     this.inputRef.focus()
   }