Merge branch 'develop' into develop

src/scripts/components/input.js

@@ -1,4 +1,4 @@
-import { calcWidthOfInput } from '../lib/utils';
+import { calcWidthOfInput, stripHTML } from '../lib/utils';
 
 export default class Input {
   constructor({ element, type, classNames, placeholderValue }) {
@@ -21,11 +21,11 @@ export default class Input {
   }
 
   set value(value) {
-    this.element.value = value;
+    this.element.value = `${value}`;
   }
 
   get value() {
-    return this.element.value;
+    return stripHTML(this.element.value);
   }
 
   addEventListeners() {
@@ -119,23 +119,11 @@ export default class Input {
     this.element.removeAttribute('aria-activedescendant');
   }
 
-  /**
-   * Input event
-   * @return
-   * @private
-   */
   _onInput() {
     if (this.type !== 'select-one') {
       this.setWidth();
     }
   }
-
-  /**
-   * Paste event
-   * @param  {Object} e Event
-   * @return
-   * @private
-   */
   _onPaste(e) {
     // Disable pasting into the input if option has been set
     if (e.target === this.element && this.preventPaste) {

src/scripts/components/input.test.js

@@ -75,7 +75,7 @@ describe('components/input', () => {
     });
   });
 
-  describe('onInput', () => {
+  describe('_onInput', () => {
     let setWidthStub;
 
     beforeEach(() => {
@@ -103,7 +103,7 @@ describe('components/input', () => {
     });
   });
 
-  describe('onPaste', () => {
+  describe('_onPaste', () => {
     let eventMock;
 
     beforeEach(() => {
@@ -130,7 +130,7 @@ describe('components/input', () => {
     });
   });
 
-  describe('onFocus', () => {
+  describe('_onFocus', () => {
     it('sets isFocussed flag to true', () => {
       expect(instance.isFocussed).to.equal(false);
       instance._onFocus();
@@ -138,7 +138,7 @@ describe('components/input', () => {
     });
   });
 
-  describe('onBlur', () => {
+  describe('_onBlur', () => {
     it('sets isFocussed flag to false', () => {
       instance.isFocussed = true;
       instance._onBlur();
@@ -336,14 +336,27 @@ describe('components/input', () => {
       instance.value = value;
       expect(instance.element.value).to.equal(value);
     });
+
+    it('casts value to string', () => {
+      const value = 1234;
+      instance.value = value;
+      expect(instance.element.value).to.equal(`${value}`);
+    });
   });
 
   describe('value getter', () => {
     it('sets value of element to passed value', () => {
       const value = 'test';
       instance.element.value = value;
-      const actualResponse = instance.value;
-      expect(actualResponse).to.equal(value);
+      expect(instance.value).to.equal(value);
+    });
+
+    it('strips HTML from value', () => {
+      const value = '<script>somethingMalicious();</script>';
+      instance.element.value = value;
+      expect(instance.value).to.equal(
+        '&lt;script&rt;somethingMalicious();&lt;/script&rt;',
+      );
     });
   });
 

src/scripts/lib/utils.js

@@ -185,7 +185,7 @@ export const isScrolledIntoView = (el, parent, direction = 1) => {
 };
 
 /**
- * Escape html in the string
+ * Escapes html in the string
  * @param  {String} html Initial string/html
  * @return {String}  Sanitised string
  */