Fixed tags input autofocus

src/common/react-tagsinput.scss

@@ -5,15 +5,12 @@
   overflow: hidden;
   min-height: 2.6rem;
   padding: 6px 0 0 6px;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 }
 
 .react-tagsinput--focused {
   border-color: #80bdff;
-  -webkit-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
   box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
-  -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
-  -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
 }
 
 .react-tagsinput-tag {
@@ -44,6 +41,6 @@
   border: 0;
   outline: none;
   padding: 3px 5px;
-  width: 155px;
+  width: 100%;
   margin-bottom: 6px;
 }

src/utils/TagsSelector.js

@@ -39,33 +39,24 @@ export class TagsSelectorComponent extends React.Component {
       </span>
     );
     const renderAutocompleteInput = (data) => {
-      const { addTag, ...rest } = data;
+      const { addTag, ...otherProps } = data;
-
       const handleOnChange = (e, { method }) => {
-        if (method === 'enter') {
+        method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
-          e.preventDefault();
-        } else {
-          rest.onChange(e);
-        }
       };
 
       // eslint-disable-next-line no-extra-parens
-      const inputValue = (rest.value && rest.value.trim().toLowerCase()) || '';
+      const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
       const inputLength = inputValue.length;
       const suggestions = tagsList.tags.filter((state) => state.toLowerCase().slice(0, inputLength) === inputValue);
 
       return (
         <Autosuggest
-          ref={rest.ref}
+          ref={otherProps.ref}
           suggestions={suggestions}
-          inputProps={{ ...rest, onChange: handleOnChange }}
+          inputProps={{ ...otherProps, onChange: handleOnChange }}
           highlightFirstSuggestion
           shouldRenderSuggestions={(value) => value && value.trim().length > 0}
-          getSuggestionValue={(suggestion) => {
+          getSuggestionValue={(suggestion) => suggestion}
-            console.log(suggestion);
-
-            return suggestion;
-          }}
           renderSuggestion={(suggestion) => (
             <React.Fragment>
               <TagBullet tag={suggestion} />