Fix #4567 - DropDown: Labels unassociated from DropDown unless :edita…

…ble="true" (#4572) * Fix #4567: DropDown: Labels unassociated from DropDown unless :editable="true" * Format fix
primefaces · Dec 22, 2023 · d9b5c59 · d9b5c59
1 parent 15debce
commit d9b5c59
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
@@ -187,6 +187,7 @@ export default {
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
+    labelClickListener: null,
     overlay: null,
     list: null,
     virtualScroller: null,
@@ -218,6 +219,7 @@ export default {
         this.id = this.id || UniqueComponentId();
 
         this.autoUpdateModel();
+        this.bindLabelClickListener();
     },
     updated() {
         if (this.overlayVisible && this.isModelValueChanged) {
@@ -229,6 +231,7 @@ export default {
     beforeUnmount() {
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
+        this.unbindLabelClickListener();
 
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
@@ -707,6 +710,28 @@ export default {
                 this.resizeListener = null;
             }
         },
+        bindLabelClickListener() {
+            if (!this.editable && !this.labelClickListener) {
+                const label = document.querySelector(`label[for="${this.inputId}"]`);
+
+                if (label && DomHandler.isVisible(label)) {
+                    this.labelClickListener = () => {
+                        DomHandler.focus(this.$refs.focusInput);
+                    };
+
+                    label.addEventListener('click', this.labelClickListener);
+                }
+            }
+        },
+        unbindLabelClickListener() {
+            if (this.labelClickListener) {
+                const label = document.querySelector(`label[for="${this.inputId}"]`);
+
+                if (label && DomHandler.isVisible(label)) {
+                    label.removeEventListener('click', this.labelClickListener);
+                }
+            }
+        },
         hasFocusableElements() {
             return DomHandler.getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
         },