From 41b26d79c642d1dcf4f3a87857431f5ddf16a86d Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 5 Dec 2023 15:05:49 +0100 Subject: [PATCH] fix: create label inputs on page load Co-authored-by: Andrea Stagi --- src/js/plugins/input-label.js | 5 ++- src/js/plugins/input-number.js | 19 ++++------- src/js/plugins/input-search-autocomplete.js | 19 ++++------- src/js/plugins/input.js | 36 +++++---------------- 4 files changed, 25 insertions(+), 54 deletions(-) diff --git a/src/js/plugins/input-label.js b/src/js/plugins/input-label.js index ac908d7cf6..a27df782a4 100644 --- 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 index fca57d83ad..f3917e1493 100644 --- 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 index 7874184094..5786ac2f02 100644 --- 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 index 71caa5feca..208493e4ec 100644 --- 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