fix: create label inputs on page load

Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
italia · Dec 5, 2023 · 41b26d7 · 41b26d7
1 parent 90e6a10
commit 41b26d7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 54 deletions.
diff --git a/src/js/plugins/input-label.js b/src/js/plugins/input-label.js
@@ -39,7 +39,10 @@ class InputLabel {
       this._labelOut()
       this._labelOver()
     }
-    this._bindEvents()
+
+    if (label && label.getAttribute('it-bs-static') === null) {
+      this._bindEvents()
+    }
   }
 
   _bindEvents() {

diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js
@@ -15,8 +15,6 @@ const EVENT_CHANGE = `change${EVENT_KEY}`
 
 //const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
-const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
-const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_ADAPTIVE = 'input-number-adaptive'
 const CLASS_NAME_PERCENTAGE = 'input-number-percentage'
@@ -168,17 +166,14 @@ const createInput = (element) => {
   return null
 }
 
-EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_INPUT + ', label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  createInput(target)
-})
-EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_INPUT + ', label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  const element = createInput(target)
-  if (element && element._label) {
-    element._label._labelOut()
-  }
+document.addEventListener('DOMContentLoaded', function () {
+  var frmel = document.querySelectorAll(SELECTOR_INPUT + ', label')
+  frmel.forEach(function (item) {
+    const target = InputLabel.getInputFromLabel(item) || item
+    createInput(target)
+  })
 })
+
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_BTN, function () {
   const wrapper = this.closest(SELECTOR_WRAPPER)
   if (wrapper) {

diff --git a/src/js/plugins/input-search-autocomplete.js b/src/js/plugins/input-search-autocomplete.js
@@ -9,15 +9,12 @@ import InputLabel from './input-label'
 const NAME = 'inputsearchautocomplete'
 const DATA_KEY = 'bs.inputsearchautocomplete'
 const EVENT_KEY = `.${DATA_KEY}`
-const DATA_API_KEY = '.data-api'
 
 const Default = {
   autocomplete: [],
 }
 
 const EVENT_KEYUP = `keyup${EVENT_KEY}`
-const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
-const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_SHOW = 'autocomplete-list-show'
 const CLASS_NAME_AUTOCOMPLETE = 'autocomplete'
@@ -137,16 +134,12 @@ const createInput = (element) => {
   return null
 }
 
-EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_SEARCH + ', label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  createInput(target)
-})
-EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_SEARCH + ', label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  const element = createInput(target)
-  if (element && element._label) {
-    element._label._labelOut()
-  }
+document.addEventListener('DOMContentLoaded', function () {
+  var frmel = document.querySelectorAll(SELECTOR_SEARCH + ', label')
+  frmel.forEach(function (item) {
+    const target = InputLabel.getInputFromLabel(item) || item
+    createInput(target)
+  })
 })
 
 export default InputSearch
diff --git a/src/js/plugins/input.js b/src/js/plugins/input.js
@@ -8,10 +8,6 @@ import InputLabel from './input-label'
 const NAME = 'input'
 const DATA_KEY = 'bs.input'
 const EVENT_KEY = `.${DATA_KEY}`
-const DATA_API_KEY = '.data-api'
-
-const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
-const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 
 const EVENT_CHANGE = `change${EVENT_KEY}`
 
@@ -67,26 +63,14 @@ class Input extends BaseComponent {
  */
 const excludes = [
   'select',
-  //'input[data-bs-input][type="number"]',
   'input[data-bs-input][type="password"]',
   'input.input-password[data-bs-input]',
   'input[data-bs-autocomplete][type="search"]',
   'input[type="time"]',
+  'input[type="radio"]',
+  'input[type="checkbox"]',
 ]
 
-/*const inputs = SelectorEngine.find('input, textarea').filter((input) => {
-  let result = true
-  excludes.forEach((selector) => {
-    if (input.matches(selector)) {
-      result = false
-    }
-  })
-  return result
-})
-inputs.forEach((input) => {
-  Input.getOrCreateInstance(input)
-})*/
-
 const createInput = (element) => {
   const toExclude = !!excludes.find((selector) => element.matches(selector))
   const isInputNumber = !!(element.getAttribute('type') === 'number' && element.parentNode.querySelector('button[class^="input-number-"]')) //check if it's a InputNumber component
@@ -96,16 +80,12 @@ const createInput = (element) => {
   return null
 }
 
-EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, 'input, textarea, label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  createInput(target)
-})
-EventHandler.on(document, EVENT_KEYUP_DATA_API, 'input, textarea, label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  const element = createInput(target)
-  if (element && element._label) {
-    element._label._labelOut()
-  }
+document.addEventListener('DOMContentLoaded', function () {
+  var frmel = document.querySelectorAll('input, textarea, label')
+  frmel.forEach(function (item) {
+    const target = InputLabel.getInputFromLabel(item) || item
+    createInput(target)
+  })
 })
 
 export default Input