fix: expand/shrink popup accordingly to textarea width (#1702)

sweetalert2 · Aug 9, 2019 · 93f59dc · 93f59dc
1 parent 765035c
commit 93f59dc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/src/utils/dom/renderers/renderInput.js b/src/utils/dom/renderers/renderInput.js
@@ -160,5 +160,22 @@ renderInputType.textarea = (params) => {
   const textarea = dom.getChildByClass(dom.getContent(), swalClasses.textarea)
   textarea.value = params.inputValue
   setInputPlaceholder(textarea, params)
+
+  if ('MutationObserver' in window) { // #1699
+    const initialPopupWidth = parseInt(window.getComputedStyle(dom.getPopup()).width)
+    const popupPadding = parseInt(window.getComputedStyle(dom.getPopup()).paddingLeft) + parseInt(window.getComputedStyle(dom.getPopup()).paddingRight)
+    const outputsize = () => {
+      const contentWidth = textarea.offsetWidth + popupPadding
+      if (contentWidth > initialPopupWidth) {
+        dom.getPopup().style.width = contentWidth + 'px'
+      } else {
+        dom.getPopup().style.width = null
+      }
+    }
+    new MutationObserver(outputsize).observe(textarea, {
+      attributes: true, attributeFilter: ['style']
+    })
+  }
+
   return textarea
 }
diff --git a/test/qunit/params/input.js b/test/qunit/params/input.js
@@ -230,3 +230,20 @@ QUnit.test('Swal.getInput() should return null when a popup is disposed', (asser
   })
   Swal.close()
 })
+
+QUnit.test('popup should expand and shrink accordingly to textarea width', (assert) => {
+  const done = assert.async()
+  SwalWithoutAnimation.fire({
+    input: 'textarea',
+  })
+  Swal.getInput().style.width = '600px'
+  setTimeout(() => {
+    assert.equal(Swal.getPopup().style.width, '640px')
+
+    Swal.getInput().style.width = '100px'
+    setTimeout(() => {
+      assert.equal(Swal.getPopup().style.width, '')
+      done()
+    })
+  })
+})