fix tag input swallowing numeric keycodes [deploy] (#4283)

* fix tag input swallowing numeric keycodes

* add AR validation for Tags class

* allow whitespace in Tag.name

* fix specs

* whitespace

* reformat

app/javascript/shared/components/__tests__/tags.test.jsx

@@ -37,13 +37,13 @@ describe('<Tags />', () => {
 
     test('calls preventDefault on unused keyCode', () => {
       tags.find('#tag-input').simulate('keydown', createKeyDown('§'));
-      tags.find('#tag-input').simulate('keydown', createKeyDown('1'));
       tags.find('#tag-input').simulate('keydown', createKeyDown('\\'));
-      expect(preventDefaultMock).toHaveBeenCalledTimes(3);
+      expect(preventDefaultMock).toHaveBeenCalledTimes(2);
     });
 
     test('does not call preventDefault on used keyCode', () => {
       tags.find('#tag-input').simulate('keypress', createKeyDown('a'));
+      tags.find('#tag-input').simulate('keydown', createKeyDown('1'));
       tags.find('#tag-input').simulate('keypress', createKeyDown(','));
       tags.find('#tag-input').simulate('keypress', createKeyDown('Enter'));
       expect(preventDefaultMock).not.toHaveBeenCalled();

app/javascript/shared/components/tags.jsx

@@ -20,7 +20,7 @@ const NAVIGATION_KEYS = [
   KEYS.TAB,
 ];
 
-const LETTERS = /[a-z]/i;
+const LETTERS_NUMBERS = /[a-z0-9]/i;
 
 /* TODO: Remove all instances of this.props.listing
    and refactor this component to be more generic */
@@ -203,7 +203,7 @@ class Tags extends Component {
       ) {
         this.clearSelectedSearchResult();
       }
-    } else if (!LETTERS.test(e.key) && !NAVIGATION_KEYS.includes(e.key)) {
+    } else if (!LETTERS_NUMBERS.test(e.key) && !NAVIGATION_KEYS.includes(e.key)) {
       e.preventDefault();
     }
   };

app/models/tag.rb

@@ -23,6 +23,8 @@ class Tag < ActsAsTaggableOn::Tag
   mount_uploader :profile_image, ProfileImageUploader
   mount_uploader :social_image, ProfileImageUploader
 
+  validates :name,
+            format: /\A[A-Za-z0-9\s]+\z/, allow_nil: true
   validates :text_color_hex,
             format: /\A#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})\z/, allow_nil: true
   validates :bg_color_hex,

spec/models/tag_spec.rb

@@ -3,29 +3,49 @@ require "rails_helper"
 RSpec.describe Tag, type: :model do
   let(:tag) { build(:tag) }
 
-  it "passes validations if bg_color_hex is valid" do
-    tag.bg_color_hex = "#000000"
-    expect(tag).to be_valid
-  end
+  describe "validations" do
 
-  it "fails validation if bg_color_hex is invalid" do
-    tag.bg_color_hex = "0000000"
-    expect(tag).not_to be_valid
-  end
+    describe "bg_color_hex" do
+      it "passes validations if bg_color_hex is valid" do
+        tag.bg_color_hex = "#000000"
+        expect(tag).to be_valid
+      end
+    
+      it "fails validation if bg_color_hex is invalid" do
+        tag.bg_color_hex = "0000000"
+        expect(tag).not_to be_valid
+      end
+    end
 
-  it "passes validations if text_color_hex is valid" do
-    tag.text_color_hex = "#000000"
-    expect(tag).to be_valid
-  end
+    describe "text_color_hex" do
+      it "passes validations if text_color_hex is valid" do
+        tag.text_color_hex = "#000000"
+        expect(tag).to be_valid
+      end
+    
+      it "fails validation if text_color_hex is invalid" do
+        tag.text_color_hex = "0000000"
+        expect(tag).not_to be_valid
+      end
+    end
 
-  it "fails validation if text_color_hex is invalid" do
-    tag.text_color_hex = "0000000"
-    expect(tag).not_to be_valid
-  end
+    describe "name" do
+      it "passes validations if name is alphanumeric" do
+        tag.name = "foobar123"
+        expect(tag).to be_valid
+      end
+
+      it "fails validations if name is not alphanumeric" do
+        tag.name = ""
+        expect(tag).not_to be_valid
+      end
+    end
+
+    it "fails validation if the alias does not refer to an existing tag" do
+      tag.alias_for = "hello"
+      expect(tag).not_to be_valid
+    end
 
-  it "fails validation if the alias does not refer to an existing tag" do
-    tag.alias_for = "hello"
-    expect(tag).not_to be_valid
   end
 
   it "turns markdown into HTML before saving" do