diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js index 19154af21f..fca57d83ad 100644 --- 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 index f49fa4c7d7..7874184094 100644 --- 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 index fa2c8163e0..71caa5feca 100644 --- 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