From 1558d05be71937287520e9636117a869da63b2aa Mon Sep 17 00:00:00 2001
From: Leo Hemsted <leo.hemsted@digital.cabinet-office.gov.uk>
Date: Thu, 5 Mar 2020 15:44:31 +0000
Subject: [PATCH] ensure highlighting div size always matches the relevant
 textarea

---
 app/assets/javascripts/enhancedTextbox.js |  4 +++-
 tests/javascripts/enhancedTextbox.test.js | 27 ++++++++++++++++++-----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/enhancedTextbox.js b/app/assets/javascripts/enhancedTextbox.js
index 8adb210f8..a4965857a 100644
--- a/app/assets/javascripts/enhancedTextbox.js
+++ b/app/assets/javascripts/enhancedTextbox.js
@@ -27,6 +27,8 @@
         `))
         .on("input", this.update);
 
+      $(window).on("resize", this.resize);
+
       visibleTextbox = this.$textbox.clone().appendTo("body").css({
         position: 'absolute',
         visibility: 'hidden',
@@ -47,7 +49,7 @@
 
     this.resize = () => {
 
-      this.$background.width(this.$textbox.outerWidth());
+      this.$background.width(this.$textbox.width());
 
       this.$textbox.height(
         Math.max(
diff --git a/tests/javascripts/enhancedTextbox.test.js b/tests/javascripts/enhancedTextbox.test.js
index 7f6db2155..9cd031900 100644
--- a/tests/javascripts/enhancedTextbox.test.js
+++ b/tests/javascripts/enhancedTextbox.test.js
@@ -107,8 +107,7 @@ describe('Enhanced textbox', () => {
 
         backgroundEl = textarea.nextElementSibling;
 
-        // element has box-sizing: border-box so width includes padding and border
-        expect(backgroundEl.style.width).toEqual('582px');
+        expect(backgroundEl.style.width).toEqual('576px');
         expect(backgroundEl.style.borderWidth).toEqual('1px');
 
       });
@@ -117,8 +116,7 @@ describe('Enhanced textbox', () => {
 
         backgroundEl = input.nextElementSibling;
 
-        // element has box-sizing: border-box so width includes padding and border
-        expect(backgroundEl.style.width).toEqual('582px');
+        expect(backgroundEl.style.width).toEqual('576px');
         expect(backgroundEl.style.borderWidth).toEqual('1px');
 
       });
@@ -147,7 +145,7 @@ describe('Enhanced textbox', () => {
       test("If the textbox is an <textarea>", () => {
 
         backgroundEl = textarea.nextElementSibling;
-        expect(backgroundEl.style.width).toEqual('582px');
+        expect(backgroundEl.style.width).toEqual('576px');
 
       });
 
@@ -256,7 +254,7 @@ describe('Enhanced textbox', () => {
   describe("When the content of the textbox is updated", () => {
 
     // doesn't apply to inputs as they have a fixed height
-    test("If new input changes the textarea's dimensions, the size of the element below should still match", () => {
+    test("If new input changes the textarea's height, the height of the element below should still match", () => {
 
       // set 10 lines of content
       textarea.textContent = `
@@ -289,6 +287,23 @@ describe('Enhanced textbox', () => {
 
     });
 
+    test("If a resize changes the textarea's width, the width of the element below should still match", () => {
+      // start module
+      window.GOVUK.modules.start();
+
+      backgroundEl = textarea.nextElementSibling;
+
+      expect(window.getComputedStyle(textarea).width).toEqual("576px");
+      expect(window.getComputedStyle(backgroundEl).width).toEqual("576px");
+
+      textarea.style.width = "500px"
+      helpers.triggerEvent(window, 'resize');
+
+      expect(window.getComputedStyle(textarea).width).toEqual("500px");
+      expect(window.getComputedStyle(backgroundEl).width).toEqual("500px");
+
+    });
+
     describe("If a new variable is added to the textbox, it should also be added to the element below in a highlight tag", () => {
 
       test("If the textbox is a <textarea>", () => {