fix: dynamic bind for input number and search autocomplete

italia · Nov 24, 2022 · 0085bd0 · 0085bd0
1 parent 4d580f5
commit 0085bd0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js
@@ -21,12 +21,12 @@ 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'
 const CLASS_NAME_CURRENCY = 'input-number-currency'
-const CLASS_NAME_INCREMENT = 'input-number-add'
+//const CLASS_NAME_INCREMENT = 'input-number-add'
 const CLASS_NAME_DECREMENT = 'input-number-sub'
 
 const SELECTOR_WRAPPER = '.input-number'
 const SELECTOR_INPUT = 'input[data-bs-input][type="number"]'
-const SELECTOR_BTN = 'button'
+const SELECTOR_BTN = 'button[class^="input-number-"]'
 
 class InputNumber extends BaseComponent {
   constructor(element) {
@@ -162,7 +162,7 @@ inputsButtons.forEach((button) => {
 })*/
 
 const createInput = (element) => {
-  if (element && element.matches(SELECTOR_INPUT)) {
+  if (element && element.matches(SELECTOR_INPUT) && element.parentNode.querySelector(SELECTOR_BTN)) {
     return InputNumber.getOrCreateInstance(element)
   }
   return null
@@ -179,14 +179,12 @@ EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_INPUT + ', label', func
     element._label._labelOut()
   }
 })
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_WRAPPER + ' ' + SELECTOR_BTN, function () {
-  if (this.classList.contains(CLASS_NAME_INCREMENT) || this.classList.contains(CLASS_NAME_DECREMENT)) {
-    const wrapper = this.closest(SELECTOR_WRAPPER)
-    if (wrapper) {
-      const input = SelectorEngine.findOne(SELECTOR_INPUT, wrapper)
-      if (input) {
-        InputNumber.getOrCreateInstance(input)
-      }
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_BTN, function () {
+  const wrapper = this.closest(SELECTOR_WRAPPER)
+  if (wrapper) {
+    const input = SelectorEngine.findOne(SELECTOR_INPUT, wrapper)
+    if (input) {
+      InputNumber.getOrCreateInstance(input)
     }
   }
 })

diff --git a/src/js/plugins/input-search-autocomplete.js b/src/js/plugins/input-search-autocomplete.js
@@ -2,7 +2,7 @@
 
 import BaseComponent from 'bootstrap/js/src/base-component'
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 import InputLabel from './input-label'
 
@@ -17,6 +17,7 @@ const Default = {
 
 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'
@@ -121,12 +122,31 @@ class InputSearch extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const inputs = SelectorEngine.find(SELECTOR_SEARCH)
+/*const inputs = SelectorEngine.find(SELECTOR_SEARCH)
 inputs.forEach((input) => {
   EventHandler.one(input, EVENT_KEYUP_DATA_API, () => {
     const searchInput = InputSearch.getOrCreateInstance(input)
     searchInput.search()
   })
+})*/
+
+const createInput = (element) => {
+  if (element && element.matches(SELECTOR_SEARCH)) {
+    return InputSearch.getOrCreateInstance(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()
+  }
 })
 
 export default InputSearch
diff --git a/src/js/plugins/input.js b/src/js/plugins/input.js
@@ -67,7 +67,7 @@ class Input extends BaseComponent {
  */
 const excludes = [
   'select',
-  'input[data-bs-input][type="number"]',
+  //'input[data-bs-input][type="number"]',
   'input[data-bs-input][type="password"]',
   'input.input-password[data-bs-input]',
   'input[data-bs-autocomplete][type="search"]',
@@ -89,7 +89,8 @@ inputs.forEach((input) => {
 
 const createInput = (element) => {
   const toExclude = !!excludes.find((selector) => element.matches(selector))
-  if (!toExclude) {
+  const isInputNumber = !!(element.getAttribute('type') === 'number' && element.parentNode.querySelector('button[class^="input-number-"]')) //check if it's a InputNumber component
+  if (!toExclude && !isInputNumber) {
     return Input.getOrCreateInstance(element)
   }
   return null