support box sizing border box (#9)

jelhan · Mar 7, 2020 · ebc94e6 · ebc94e6
1 parent 7e4a0b3
commit ebc94e6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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();
+  });
 });