Fix primefaces#4567: DropDown: Labels unassociated from DropDown unle…

…ss :editable="true"
FlipWarthog · Oct 7, 2023 · 889d66b · 889d66b
1 parent 5d1f615
commit 889d66b
Showing 1 changed file with 26 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();
@@ -704,6 +707,29 @@ 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;
         },