From 9e08ae6f1f8a49735f7d99a2eeb846ba00fad837 Mon Sep 17 00:00:00 2001
From: Jacob Herrington <jacobherringtondeveloper@gmail.com>
Date: Thu, 16 Jul 2020 11:28:03 -0500
Subject: [PATCH] [deploy] Restrict tags input regex (#9172)

---
 app/javascript/article-form/components/TagsField.jsx | 7 ++++++-
 app/javascript/listings/listingForm.jsx              | 3 +++
 app/javascript/shared/components/tags.jsx            | 3 ++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/javascript/article-form/components/TagsField.jsx b/app/javascript/article-form/components/TagsField.jsx
index ed00f5322..66ae8a7bb 100644
--- a/app/javascript/article-form/components/TagsField.jsx
+++ b/app/javascript/article-form/components/TagsField.jsx
@@ -2,7 +2,11 @@ import { h } from 'preact';
 import PropTypes from 'prop-types';
 import Tags from '../../shared/components/tags';
 
-export const TagsField = ({ defaultValue, onInput, switchHelpContext }) => {
+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, ]+';
+
   return (
     <div className="crayons-article-form__tagsfield">
       <Tags
@@ -12,6 +16,7 @@ export const TagsField = ({ defaultValue, onInput, switchHelpContext }) => {
         onFocus={switchHelpContext}
         classPrefix="crayons-article-form"
         fieldClassName="crayons-textfield crayons-textfield--ghost ff-accent"
+        pattern={TAG_FORMAT}
       />
     </div>
   );
diff --git a/app/javascript/listings/listingForm.jsx b/app/javascript/listings/listingForm.jsx
index 56f1a42d4..f6899855e 100644
--- a/app/javascript/listings/listingForm.jsx
+++ b/app/javascript/listings/listingForm.jsx
@@ -61,6 +61,8 @@ 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">
@@ -100,6 +102,7 @@ export default class ListingForm extends Component {
             maxTags={8}
             autocomplete="off"
             listing
+            pattern={TAG_FORMAT}
           />
           <ExpireDate
             defaultValue={expireDate}
diff --git a/app/javascript/shared/components/tags.jsx b/app/javascript/shared/components/tags.jsx
index e4c837178..57972a0a2 100644
--- a/app/javascript/shared/components/tags.jsx
+++ b/app/javascript/shared/components/tags.jsx
@@ -374,6 +374,7 @@ class Tags extends Component {
       listing,
       fieldClassName,
       onFocus,
+      pattern,
     } = this.props;
     const { activeElement } = document;
     const searchResultsRows = searchResults.map((tag, index) => (
@@ -449,7 +450,7 @@ class Tags extends Component {
           onKeyDown={this.handleKeyDown}
           onBlur={this.handleFocusChange}
           onFocus={onFocus}
-          pattern={`${LETTERS_NUMBERS}`}
+          pattern={pattern}
         />
         {searchResultsHTML}
       </div>