From 39ab6ca9650b98b63b03474bccdc0a8a83d79c53 Mon Sep 17 00:00:00 2001 From: Andreas Boesl Date: Thu, 16 Jan 2025 11:42:11 +0100 Subject: [PATCH] vue: FormLegacyValuespec: reduced needless registration of event listeners Change-Id: Ibd92c1b422379cc4529a1e0320605e17596af939 --- .../components/forms/FormLegacyValueSpec.vue | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/cmk-frontend-vue/src/form/components/forms/FormLegacyValueSpec.vue b/packages/cmk-frontend-vue/src/form/components/forms/FormLegacyValueSpec.vue index 731f7e340b7..21c2ff450a9 100644 --- a/packages/cmk-frontend-vue/src/form/components/forms/FormLegacyValueSpec.vue +++ b/packages/cmk-frontend-vue/src/form/components/forms/FormLegacyValueSpec.vue @@ -46,13 +46,11 @@ onMounted(() => { window['cmk'].forms.enable_dynamic_form_elements(legacyDOM.value!) // @ts-expect-error comes from different javascript file window['cmk'].valuespecs.initialize_autocompleters(legacyDOM.value!) - addEventListeners() + updateEventListeners() const observer = new MutationObserver(() => { collectData() - // On every mutation, we need to remove and re-add the event listeners - removeEventListeners() - addEventListeners() + updateEventListeners() }) observer.observe(legacyDOM.value!, { @@ -68,18 +66,18 @@ onMounted(() => { }) onBeforeUnmount(() => { - removeEventListeners() -}) - -function addEventListeners() { legacyDOM.value!.querySelectorAll(QUERY_INPUT_OBSERVER).forEach((element) => { - element.addEventListener('input', collectData) + element.removeEventListener('input', collectData) }) -} +}) -function removeEventListeners() { +function updateEventListeners() { legacyDOM.value!.querySelectorAll(QUERY_INPUT_OBSERVER).forEach((element) => { - element.removeEventListener('input', collectData) + if (element.getAttribute('data-has-event-listener') === 'true') { + return + } + element.setAttribute('data-has-event-listener', 'true') + element.addEventListener('input', collectData) }) }