tidy up tags

Author: ncarchedi

src/App.js

@@ -100,7 +100,7 @@ export default function App() {
     const otherTags = allTags.slice(0, -1);
     let newTag = allTags.slice(-1)[0];
     // add new tag if it doesn't already exist
-    if (newTag.inputValue) {
+    if (newTag && newTag.inputValue) {
       newTag = createTag(newTag.inputValue);
       allTags = [...otherTags, newTag];
     }

src/TagsInput.js

@@ -26,12 +26,14 @@ export default function TagsInput(props) {
       onChange={props.onChange}
       inputValue={inputValue}
       onInputChange={(e, newInputValue) => {
-        setInputValue(newInputValue);
+        setInputValue(newInputValue.toLowerCase());
       }}
       multiple
       autoHighlight
       filterSelectedOptions
       freeSolo
+      clearOnBlur
+      openOnFocus
       filterOptions={(options, params) => {
         const filtered = filter(options, params);
         // Suggest the creation of a new value per...
@@ -44,7 +46,11 @@ export default function TagsInput(props) {
         }
         return filtered;
       }}
-      options={props.options}
+      options={props.options.sort((a, b) => {
+        if (a.label < b.label) return -1;
+        if (a.label > b.label) return 1;
+        return 0;
+      })}
       getOptionLabel={(option) => option.label}
       renderOption={(option, { inputValue }) => {
         const matches = match(option.label, inputValue);