fixed issues with initial text input

Author: seveibar

package.json

@@ -42,7 +42,7 @@
     "react-dom": "16.8.0-alpha.1",
     "react-monaco-editor": "^0.26.2",
     "react-scripts": "2.1.3",
-    "react-select": "^2.4.3",
+    "react-select": "^3.0.8",
     "react-syntax-highlighter": "^10.3.0",
     "spelling": "^2.0.1"
   }

src/components/EditableDocument/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { useState } from "react"
-import CreatableSelect from "react-select/lib/AsyncCreatable"
+import CreatableSelect from "react-select/async-creatable"
 import Spelling from "spelling"
 import enDictionary from "spelling/dictionaries/en_US"
 import chroma from "chroma-js"
@@ -79,7 +79,8 @@ export default function EditableDocument({
   initialText?: string,
   validator?: string => Array<string>,
   onChange: string => any,
-  phraseBank?: Array<string>
+  phraseBank?: Array<string>,
+  lowerCaseMode?: boolean
 }) {
   const [inputValue, changeInputValue] = useState()
   const [value, changeValue] = useState(
@@ -90,6 +91,7 @@ export default function EditableDocument({
   const [validationErrors, changeValidationErrors] = useState([])
 
   const handleChange = v => {
+    if (!v) v = []
     changeValue(v)
     const result = v.map(l => l.label).join(" ")
     try {
@@ -103,7 +105,10 @@ export default function EditableDocument({
   const handleKeyDown = ({ key }) => {
     if (!inputValue) return
     if (key === "Enter" || key === "Tab") {
-      changeValue([...value, createOption(inputValue + " ", yellow[700])])
+      changeValue([
+        ...(value || []),
+        createOption(inputValue + " ", yellow[700])
+      ])
       changeInputValue("")
     }
   }