fix: getInput() (sweetalert2#2376)

cypress.json

@@ -1,3 +1,4 @@
 {
-  "video": false
+  "video": false,
+  "nodeVersion": "bundled"
 }

cypress/integration/methods/input.spec.js

@@ -379,6 +379,28 @@ describe('Input', () => {
     Swal.fire({ input: 'select', inputOptions: 'invalid-input-options' })
     expect(spy.calledWith('SweetAlert2: Unexpected type of inputOptions! Expected object, Map or Promise, got string')).to.be.true
   })
+
+  it('multiple inputs', (done) => {
+    Swal.fire({
+      html:
+        '<input id="swal-input1" class="swal2-input">' +
+        '<input id="swal-input2" class="swal2-input">',
+      preConfirm: () => {
+        return [
+          document.getElementById('swal-input1').value,
+          document.getElementById('swal-input2').value
+        ]
+      },
+      didOpen: () => {
+        document.getElementById('swal-input1').value = 'foo'
+        document.getElementById('swal-input2').value = 'bar'
+        Swal.clickConfirm()
+      }
+    }).then(result => {
+      expect(result.value).to.eql(['foo', 'bar'])
+      done()
+    })
+  })
 })
 
 describe('Validation', () => {

gulpfile.js

@@ -73,7 +73,7 @@ if (typeof this !== 'undefined' && this.Sweetalert2){\
       },
       // https://github.com/rollup/rollup/issues/2271
       onwarn (warning, rollupWarn) {
-        if (warning.code !== 'CIRCULAR_DEPENDENCY') {
+        if (warning.code !== 'CIRCULAR_DEPENDENCY' && warning.code !== 'THIS_IS_UNDEFINED') {
           rollupWarn(warning)
         }
       },

src/utils/dom/domUtils.js

@@ -83,16 +83,16 @@ export const getInput = (popup, inputType) => {
     case 'select':
     case 'textarea':
     case 'file':
-      return popup.querySelector(`.${swalClasses[inputType]}`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses[inputType]}`)
     case 'checkbox':
-      return popup.querySelector(`.${swalClasses.checkbox} input`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.checkbox} input`)
     case 'radio':
-      return popup.querySelector(`.${swalClasses.radio} input:checked`) ||
-        popup.querySelector(`.${swalClasses.radio} input:first-child`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.radio} input:checked`) ||
+        popup.querySelector(`.${swalClasses.popup} > .${swalClasses.radio} input:first-child`)
     case 'range':
-      return popup.querySelector(`.${swalClasses.range} input`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.range} input`)
     default:
-      return popup.querySelector(`.${swalClasses.input}`)
+      return popup.querySelector(`.${swalClasses.popup} > .${swalClasses.input}`)
   }
 }
 
@@ -151,11 +151,13 @@ export const removeClass = (target, classList) => {
 }
 
 /**
+ * Get direct child of an element by class name
+ *
  * @param {HTMLElement} elem
  * @param {string} className
  * @returns {HTMLElement | null}
  */
-export const getChildByClass = (elem, className) => {
+export const getDirectChildByClass = (elem, className) => {
   const childNodes = toArray(elem.childNodes)
   for (let i = 0; i < childNodes.length; i++) {
     if (hasClass(childNodes[i], className)) {

src/utils/dom/init.js

@@ -1,6 +1,6 @@
 import { swalClasses } from '../classes.js'
 import { getContainer, getPopup } from './getters.js'
-import { addClass, removeClass, getChildByClass, setInnerHtml } from './domUtils.js'
+import { addClass, removeClass, getDirectChildByClass, setInnerHtml } from './domUtils.js'
 import { isNodeEnv } from '../isNodeEnv.js'
 import { error } from '../utils.js'
 import globalState from '../../globalState.js'
@@ -66,13 +66,13 @@ const resetValidationMessage = () => {
 const addInputChangeListeners = () => {
   const popup = getPopup()
 
-  const input = getChildByClass(popup, swalClasses.input)
-  const file = getChildByClass(popup, swalClasses.file)
+  const input = getDirectChildByClass(popup, swalClasses.input)
+  const file = getDirectChildByClass(popup, swalClasses.file)
   const range = popup.querySelector(`.${swalClasses.range} input`)
   const rangeOutput = popup.querySelector(`.${swalClasses.range} output`)
-  const select = getChildByClass(popup, swalClasses.select)
+  const select = getDirectChildByClass(popup, swalClasses.select)
   const checkbox = popup.querySelector(`.${swalClasses.checkbox} input`)
-  const textarea = getChildByClass(popup, swalClasses.textarea)
+  const textarea = getDirectChildByClass(popup, swalClasses.textarea)
 
   input.oninput = resetValidationMessage
   file.onchange = resetValidationMessage

src/utils/dom/inputUtils.js

@@ -1,6 +1,6 @@
 import * as dom from './index.js'
 import { swalClasses } from '../classes.js'
-import { getChildByClass } from './domUtils.js'
+import { getDirectChildByClass } from './domUtils.js'
 import { asPromise, error, hasToPromiseFn, isPromise } from '../utils.js'
 import { showLoading } from '../../staticMethods/showLoading.js'
 
@@ -75,7 +75,7 @@ const handleInputValue = (instance, params) => {
 
 const populateInputOptions = {
   select: (popup, inputOptions, params) => {
-    const select = getChildByClass(popup, swalClasses.select)
+    const select = getDirectChildByClass(popup, swalClasses.select)
     const renderOption = (parent, optionLabel, optionValue) => {
       const option = document.createElement('option')
       option.value = optionValue
@@ -104,7 +104,7 @@ const populateInputOptions = {
   },
 
   radio: (popup, inputOptions, params) => {
-    const radio = getChildByClass(popup, swalClasses.radio)
+    const radio = getDirectChildByClass(popup, swalClasses.radio)
     inputOptions.forEach(inputOption => {
       const radioValue = inputOption[0]
       const radioLabel = inputOption[1]

src/utils/dom/renderers/renderInput.js

@@ -12,7 +12,7 @@ export const renderInput = (instance, params) => {
 
   inputTypes.forEach((inputType) => {
     const inputClass = swalClasses[inputType]
-    const inputContainer = dom.getChildByClass(popup, inputClass)
+    const inputContainer = dom.getDirectChildByClass(popup, inputClass)
 
     // set attributes
     setAttributes(inputType, params.inputAttributes)
@@ -99,7 +99,7 @@ const setInputLabel = (input, prependTo, params) => {
 
 const getInputContainer = (inputType) => {
   const inputClass = swalClasses[inputType] ? swalClasses[inputType] : swalClasses.input
-  return dom.getChildByClass(dom.getPopup(), inputClass)
+  return dom.getDirectChildByClass(dom.getPopup(), inputClass)
 }
 
 const renderInputType = {}

src/variables.scss

@@ -70,7 +70,7 @@ $swal2-html-container-word-wrap: break-word !default;
 $swal2-html-container-word-break: break-word !default;
 
 // INPUT
-$swal2-input-margin: 1em 2em 0 !default;
+$swal2-input-margin: 1em 2em 3px !default;
 $swal2-input-width: auto !default;
 $swal2-input-height: 2.625em !default;
 $swal2-input-padding: 0 .75em !default;