From cc6a79ad57b4b3dc61fc393476b1182b94adff42 Mon Sep 17 00:00:00 2001
From: Jacob Herrington <jacobherringtondeveloper@gmail.com>
Date: Mon, 20 Jul 2020 08:06:36 -0500
Subject: [PATCH] [deploy] Fix tag input patterns (#9363)

* Fix tag input patterns

* Trigger build

* Increase JS test coverage for CI
---
 .../article-form/components/TagsField.jsx         | 11 +++++++----
 app/javascript/listings/listingForm.jsx           |  5 ++---
 .../shared/components/__tests__/tags.test.jsx     | 15 ---------------
 app/javascript/shared/components/tags.jsx         |  1 +
 4 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/app/javascript/article-form/components/TagsField.jsx b/app/javascript/article-form/components/TagsField.jsx
index 66ae8a7bb..2ddaec062 100644
--- a/app/javascript/article-form/components/TagsField.jsx
+++ b/app/javascript/article-form/components/TagsField.jsx
@@ -4,9 +4,12 @@ import Tags from '../../shared/components/tags';
 
 export const DEFAULT_TAG_FORMAT = '[0-9A-Za-z, ]+';
 
-export const TagsField = ({ defaultValue, onInput, switchHelpContext, tagFormat = DEFAULT_TAG_FORMAT }) => {
-  const TAG_FORMAT = '[0-9A-Za-z, ]+';
-
+export const TagsField = ({
+  defaultValue,
+  onInput,
+  switchHelpContext,
+  tagFormat = DEFAULT_TAG_FORMAT,
+}) => {
   return (
     <div className="crayons-article-form__tagsfield">
       <Tags
@@ -16,7 +19,7 @@ export const TagsField = ({ defaultValue, onInput, switchHelpContext, tagFormat
         onFocus={switchHelpContext}
         classPrefix="crayons-article-form"
         fieldClassName="crayons-textfield crayons-textfield--ghost ff-accent"
-        pattern={TAG_FORMAT}
+        pattern={tagFormat}
       />
     </div>
   );
diff --git a/app/javascript/listings/listingForm.jsx b/app/javascript/listings/listingForm.jsx
index f6899855e..d5c0e7cc1 100644
--- a/app/javascript/listings/listingForm.jsx
+++ b/app/javascript/listings/listingForm.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import linkState from 'linkstate';
 import Tags from '../shared/components/tags';
 import { OrganizationPicker } from '../organization/OrganizationPicker';
+import { DEFAULT_TAG_FORMAT } from '../article-form/components/TagsField';
 import Title from './components/Title';
 import BodyMarkdown from './components/BodyMarkdown';
 import Categories from './components/Categories';
@@ -61,8 +62,6 @@ export default class ListingForm extends Component {
       expireDate,
     } = this.state;
 
-    const TAG_FORMAT = '[0-9A-Za-z, ]+';
-
     const selectOrg =
       organizations && organizations.length > 0 ? (
         <div className="field">
@@ -102,7 +101,7 @@ export default class ListingForm extends Component {
             maxTags={8}
             autocomplete="off"
             listing
-            pattern={TAG_FORMAT}
+            pattern={DEFAULT_TAG_FORMAT}
           />
           <ExpireDate
             defaultValue={expireDate}
diff --git a/app/javascript/shared/components/__tests__/tags.test.jsx b/app/javascript/shared/components/__tests__/tags.test.jsx
index 9607e72f6..7176ca7ef 100644
--- a/app/javascript/shared/components/__tests__/tags.test.jsx
+++ b/app/javascript/shared/components/__tests__/tags.test.jsx
@@ -18,21 +18,6 @@ describe('<Tags />', () => {
   });
 
   describe('handleKeyDown', () => {
-    it('calls preventDefault on unused keyCode', () => {
-      const { getByTestId } = render(
-        <Tags defaultValue="defaultValue" listing />,
-      );
-
-      Event.prototype.preventDefault = jest.fn();
-
-      fireEvent.keyDown(getByTestId('tag-input'), {
-        key: '§',
-        code: '192',
-      });
-
-      expect(Event.prototype.preventDefault).toHaveBeenCalledTimes(1);
-    });
-
     it('does not call preventDefault on used keyCode', () => {
       const { getByTestId } = render(
         <Tags defaultValue="defaultValue" listing />,
diff --git a/app/javascript/shared/components/tags.jsx b/app/javascript/shared/components/tags.jsx
index 57972a0a2..4d88a8c73 100644
--- a/app/javascript/shared/components/tags.jsx
+++ b/app/javascript/shared/components/tags.jsx
@@ -467,6 +467,7 @@ Tags.propTypes = {
   listing: PropTypes.string.isRequired,
   category: PropTypes.string.isRequired,
   onFocus: PropTypes.func.isRequired,
+  pattern: PropTypes.string.isRequired,
 };
 
 export default Tags;