From ebc94e6648f920e5119f4b32c332fa2bc9c7b227 Mon Sep 17 00:00:00 2001
From: Jeldrik Hanschke <jelhan@users.noreply.github.com>
Date: Sat, 7 Mar 2020 17:17:34 +0100
Subject: [PATCH] support box sizing border box (#9)

---
 addon/modifiers/autoresize.js                  | 13 ++++++++++++-
 tests/dummy/app/templates/application.hbs      | 12 ++++++++++++
 tests/integration/modifiers/autoresize-test.js | 11 ++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/addon/modifiers/autoresize.js b/addon/modifiers/autoresize.js
index f0d9679..fa27c65 100644
--- a/addon/modifiers/autoresize.js
+++ b/addon/modifiers/autoresize.js
@@ -1,8 +1,19 @@
 import { modifier } from 'ember-modifier';
 
 function resize(element) {
+  // height must be calculated independently from height previously enforced
   element.style.height = 'auto';
-  element.style.height = `${element.scrollHeight}px`;
+
+  let isBorderBox = window.getComputedStyle(element).boxSizing === 'border-box';
+  let requiredHeight = element.scrollHeight;
+
+  if (isBorderBox) {
+    // borders must be added on top of scrollHeight if box-sizing is border-box
+    let borderHeight = element.offsetHeight - element.clientHeight;
+    requiredHeight += borderHeight;
+  }
+
+  element.style.height = `${requiredHeight}px`;
 }
 
 function eventHandler(event) {
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index e7755ea..60847a2 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -38,3 +38,15 @@ Delete some content from this textarea to see it shrink until it reaches min-wid
 <textarea value={{this.value}} {{autoresize this.value}} {{on "input" (action (mut this.value) value="target.value")}} />
 <textarea value={{this.value}} {{autoresize this.value}} {{on "input" (action (mut this.value) value="target.value")}} />
 {{!-- template-lint-enable no-action --}}
+
+<h3>Supports box-sizing: border-box</h3>
+{{!-- template-lint-disable no-inline-styles --}}
+<textarea
+  style="box-sizing: border-box"
+  value="Some content with line breaks.
+This is a new line.
+And the third line.
+And a very long string that does not fit into one line. Cause it has even more content."
+  {{autoresize}}
+/>
+{{!-- template-lint-enable no-inline-styles --}}
diff --git a/tests/integration/modifiers/autoresize-test.js b/tests/integration/modifiers/autoresize-test.js
index 0a7777d..f4ee841 100644
--- a/tests/integration/modifiers/autoresize-test.js
+++ b/tests/integration/modifiers/autoresize-test.js
@@ -34,7 +34,7 @@ module('Integration | Modifier | autoresize', function(hooks) {
     this.set('value', longString);
 
     await render(hbs`<textarea value={{this.value}} {{autoresize}} />`);
-    assert.extendedDom('textarea').doesNotOverflow('textarea does not overflow before input');
+    assert.extendedDom('textarea').doesNotOverflow();
   });
 
   test('it grows textarea on input to fit value', async function(assert) {
@@ -83,4 +83,13 @@ module('Integration | Modifier | autoresize', function(hooks) {
       .extendedDom(element)
       .doesNotOverflow('textarea does not overflow after programmatic change');
   });
+
+  test('it supports box-sizing: border-box', async function(assert) {
+    this.set('value', longString);
+
+    await render(
+      hbs`<textarea style="box-sizing: border-box" value={{this.value}} {{autoresize}} />`
+    );
+    assert.extendedDom('textarea').doesNotOverflow();
+  });
 });