Tag focus (codesandbox#1388)

**What kind of change does this PR introduce?**
Fixes loose focus on keydown

<!-- You can also link to an open issue here -->
**What is the current behavior?**
Removed focus on keypress

**What is the new behavior?**
Works now

closes codesandbox#1385

Author: SaraVieira

packages/app/src/app/components/EditableTags/index.js

@@ -2,8 +2,7 @@ import React, { Fragment } from 'react';
 import { createGlobalStyle } from 'styled-components';
 import TagsInput from 'react-tagsinput';
 
-export default function(color) {
-  const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle`
   .react-tagsinput {
     display: flex;
     flex-wrap: row;
@@ -19,7 +18,7 @@ export default function(color) {
     margin: 0.2rem;
     font-size: 13px;
     padding: 0.3em 0.5em;
-    background-color: ${color()};
+    background-color: ${props => props.color};
     color: white;
     font-weight: 500;
     border-radius: 4px;
@@ -43,7 +42,7 @@ export default function(color) {
     width: 80px;
 
     &:focus {
-      border-color: ${color.clearer(0.3)()};
+      border-color: ${props => props.color.clearer(0.3)};
     }
   }
 
@@ -58,10 +57,9 @@ export default function(color) {
   }
 `;
 
-  return props => (
-    <Fragment>
-      <GlobalStyle />
-      <TagsInput {...props} />
-    </Fragment>
-  );
-}
+export default props => (
+  <Fragment>
+    <GlobalStyle color={props.template.color} />
+    <TagsInput {...props} />
+  </Fragment>
+);

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.js

@@ -13,7 +13,7 @@ import UserWithAvatar from 'app/components/UserWithAvatar';
 import Stats from 'app/pages/common/Stats';
 import PrivacyStatus from 'app/components/PrivacyStatus';
 import GithubBadge from 'common/components/GithubBadge';
-import createEditableTags from 'app/components/EditableTags';
+import EditableTags from 'app/components/EditableTags';
 import Tags from 'common/components/Tags';
 import Switch from 'common/components/Switch';
 import Tooltip from 'common/components/Tooltip';
@@ -102,7 +102,6 @@ class Project extends React.Component {
 
     const template = getTemplateDefinition(sandbox.template);
 
-    const EditableTags = createEditableTags(template.color);
     return (
       <div style={{ marginBottom: '1rem' }}>
         <Item style={{ marginTop: '.5rem' }}>
@@ -217,17 +216,18 @@ class Project extends React.Component {
         <StatsContainer>
           <Stats sandbox={sandbox} />
         </StatsContainer>
-
         <Item>
           {editable ? (
             <EditableTags
+              template={template}
               value={sandbox.tags.toJS()}
               onChange={this.changeTags}
               onChangeInput={value => {
                 signals.workspace.tagChanged({
                   tagName: value,
                 });
               }}
+              maxTags={5}
               inputValue={store.workspace.tags.tagName}
               renderInput={this.renderInput}
               onlyUnique