[deploy] Fix tag input patterns (#9363)

* Fix tag input patterns

* Trigger build

* Increase JS test coverage for CI

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>
   );

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}

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 />,

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;