diff --git a/client/coral-admin/src/components/TagsInput.css b/client/coral-admin/src/components/TagsInput.css
new file mode 100644
index 000000000..6bb630521
--- /dev/null
+++ b/client/coral-admin/src/components/TagsInput.css
@@ -0,0 +1,51 @@
+.root {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ overflow: hidden;
+ padding-left: 5px;
+ padding-top: 5px;
+
+}
+
+.rootFocuesd {
+ border-color: rgb(142, 76, 65);
+}
+
+.tag {
+ background-color: rgb(255, 220, 214);
+ border-radius: 2px;
+ border: 1px solid rgb(244, 126, 107);
+ color: rgb(244, 126, 107);
+ display: inline-block;
+ font-family: sans-serif;
+ font-size: 13px;
+ font-weight: 400;
+ margin-bottom: 5px;
+ margin-right: 5px;
+ padding: 5px;
+}
+
+.tagRemove {
+ cursor: pointer;
+ font-weight: bold;
+ color: rgb(101, 24, 23);
+
+ &::before {
+ content: " ×";
+ }
+}
+
+.input > input {
+ background: transparent;
+ border: 0;
+ color: #777;
+ font-family: sans-serif;
+ font-size: 13px;
+ font-weight: 400;
+ margin-bottom: 6px;
+ margin-top: 1px;
+ outline: none;
+ padding: 5px;
+}
+
+
diff --git a/client/coral-admin/src/components/TagsInput.js b/client/coral-admin/src/components/TagsInput.js
new file mode 100644
index 000000000..d9854ed86
--- /dev/null
+++ b/client/coral-admin/src/components/TagsInput.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import styles from './TagsInput.css';
+import AutosizeInput from 'react-input-autosize';
+
+const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) =>
+ ;
+
+export default (props) => {
+ return (
+ data.split(',').map((d) => d.trim())}
+ className={styles.root}
+ focusedClassName={styles.rootFocus}
+ renderInput={autosizingRenderInput}
+ {...props}
+
+ tagProps={{
+ className: styles.tag,
+ classNameRemove: styles.tagRemove,
+ ...props.tagProps,
+ }}
+ inputProps={{
+ className: styles.input,
+ ...props.inputProps,
+ }}
+ />
+ );
+};
diff --git a/client/coral-admin/src/routes/Configure/components/Configure.css b/client/coral-admin/src/routes/Configure/components/Configure.css
index 22e46518c..5b02b963a 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.css
+++ b/client/coral-admin/src/routes/Configure/components/Configure.css
@@ -136,13 +136,6 @@
resize: none;
}
-#bannedWordlist, #suspectWordlist {
- display: block;
- input {
- width: 100%;
- }
-}
-
.customCSSInput {
width: 100%;
font-size: 14px;
diff --git a/client/coral-admin/src/routes/Configure/components/Domainlist.js b/client/coral-admin/src/routes/Configure/components/Domainlist.js
index 45790ec89..7b7565c5e 100644
--- a/client/coral-admin/src/routes/Configure/components/Domainlist.js
+++ b/client/coral-admin/src/routes/Configure/components/Domainlist.js
@@ -1,7 +1,7 @@
import React from 'react';
import {Card} from 'coral-ui';
import styles from './Configure.css';
-import TagsInput from 'react-tagsinput';
+import TagsInput from 'coral-admin/src/components/TagsInput';
import t from 'coral-framework/services/i18n';
const Domainlist = ({domains, onChangeDomainlist}) => {
@@ -14,8 +14,6 @@ const Domainlist = ({domains, onChangeDomainlist}) => {
data.split(',').map((d) => d.trim())}
onChange={(tags) => onChangeDomainlist('whitelist', tags)}
/>
diff --git a/client/coral-admin/src/routes/Configure/components/Wordlist.js b/client/coral-admin/src/routes/Configure/components/Wordlist.js
index af8c1b383..e96f37f9f 100644
--- a/client/coral-admin/src/routes/Configure/components/Wordlist.js
+++ b/client/coral-admin/src/routes/Configure/components/Wordlist.js
@@ -1,6 +1,6 @@
import React from 'react';
import t from 'coral-framework/services/i18n';
-import TagsInput from 'react-tagsinput';
+import TagsInput from 'coral-admin/src/components/TagsInput';
import styles from './Configure.css';
import {Card} from 'coral-ui';
@@ -13,8 +13,6 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
data.split(',').map((d) => d.trim())}
onChange={(tags) => onChangeWordlist('banned', tags)}
/>
@@ -26,8 +24,6 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
data.split(',').map((d) => d.trim())}
onChange={(tags) => onChangeWordlist('suspect', tags)} />
diff --git a/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js b/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js
index 6741954ec..20b037890 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js
@@ -1,7 +1,7 @@
import React from 'react';
import styles from './style.css';
import {Button, Card} from 'coral-ui';
-import TagsInput from 'react-tagsinput';
+import TagsInput from 'coral-admin/src/components/TagsInput';
import t from 'coral-framework/services/i18n';
@@ -16,9 +16,6 @@ const PermittedDomainsStep = (props) => {
data.split(',').map((d) => d.trim())}
onChange={(tags) => handleDomainsChange(tags)}
/>
diff --git a/package.json b/package.json
index 729358ffc..9d48f39cd 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
"passport-local": "^1.0.0",
"prop-types": "^15.5.10",
"react-apollo": "^1.1.0",
+ "react-input-autosize": "^1.1.4",
"react-recaptcha": "^2.2.6",
"react-toastify": "^1.5.0",
"react-transition-group": "^1.1.3",
@@ -195,7 +196,7 @@
"react-mdl-selectfield": "^0.2.0",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
- "react-tagsinput": "^3.14.0",
+ "react-tagsinput": "^3.17.0",
"redux": "^3.6.0",
"redux-mock-store": "^1.2.1",
"redux-thunk": "^2.1.0",
diff --git a/views/admin.ejs b/views/admin.ejs
index 4ef4112da..54c666395 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -33,58 +33,6 @@
#root > div {
height: 100%;
}
-
- /* putting this here until I can get webpack to behave */
- .react-tagsinput {
- background-color: #fff;
- border: 1px solid #ccc;
- overflow: hidden;
- padding-left: 5px;
- padding-top: 5px;
- }
-
- .react-tagsinput--focused {
- border-color: rgb(142, 76, 65);
- }
-
- .react-tagsinput-tag {
- background-color: rgb(255, 220, 214);
- border-radius: 2px;
- border: 1px solid rgb(244, 126, 107);
- color: rgb(244, 126, 107);
- display: inline-block;
- font-family: sans-serif;
- font-size: 13px;
- font-weight: 400;
- margin-bottom: 5px;
- margin-right: 5px;
- padding: 5px;
- }
-
- .react-tagsinput-remove {
- cursor: pointer;
- font-weight: bold;
- color: rgb(101, 24, 23);
- }
-
- .react-tagsinput-tag a::before {
- content: " ×";
- }
-
- .react-tagsinput-input {
- background: transparent;
- border: 0;
- color: #777;
- font-family: sans-serif;
- font-size: 13px;
- font-weight: 400;
- margin-bottom: 6px;
- margin-top: 1px;
- outline: none;
- padding: 5px;
- width: 90px;
- }
-
<% if (data != null) { %>
diff --git a/yarn.lock b/yarn.lock
index df7efdaf8..6e8776e08 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2041,7 +2041,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2:
create-hash "^1.1.0"
inherits "^2.0.1"
-create-react-class@^15.5.1:
+create-react-class@^15.5.1, create-react-class@^15.5.2:
version "15.5.2"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.5.2.tgz#6a8758348df660b88326a0e764d569f274aad681"
dependencies:
@@ -6878,6 +6878,13 @@ react-highlight-words@^0.6.0:
dependencies:
highlight-words-core "^1.0.2"
+react-input-autosize@^1.1.4:
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-1.1.4.tgz#cbc45072d4084ddc57806db8e3b34e644b8366ac"
+ dependencies:
+ create-react-class "^15.5.2"
+ prop-types "^15.5.8"
+
react-linkify@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/react-linkify/-/react-linkify-0.1.3.tgz#6e886180bda6c8fdc5f9f8a7ebe82fc0f48db7ad"
@@ -6931,9 +6938,9 @@ react-router@^3.0.0:
prop-types "^15.5.6"
warning "^3.0.0"
-react-tagsinput@^3.14.0:
- version "3.16.1"
- resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.16.1.tgz#dfb3bcbe5fc4430f60c145716c17cdc2613ce117"
+react-tagsinput@^3.17.0:
+ version "3.17.0"
+ resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.17.0.tgz#d699bc7ff3be3492d5a3d2a57f6976908774fba3"
react-toastify@^1.5.0:
version "1.5.0"