Primeng: Dropdowns and MultiSelects open inconsistently or not at all when using a wrapped-label layout

[GregKosmo]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case
https://stackblitz.com/edit/github-6wsadz

Current behavior
After surrounding a p-dropdown or p-multiSelect with a label tag, clicking on the dropdown icon or any portion of the multiSelect no longer expands their options.

Expected behavior
The components should behave the same regardless of whether they are wrapped in a label tag or not.

Minimal reproduction of the problem with instructions

1. Insert a p-dropdown or p-multiSelect in HTML and provide it an array of options.
2. Surround the component with a HTML label tag and add some arbitrary label.
3. Observe as the component no longer expands to show its options when clicked.

See example here: https://stackblitz.com/edit/github-6wsadz

What is the motivation / use case for changing the behavior?
My organization would like to implement a wrapped-label form framework so labels and inputs are automatically associated with one another and we no longer have to provide "for" and "id" tags on our labels/inputs. It will save us a lot of headache and boilerplate code in the long run.

Please tell us about your environment:

• OS: Windows 10
• IDE: Visual Studio Code
• Package Manager: NPM
• HTTP Server: Apache Tomcat
• Angular version: 7.2.7, verified on 9.0.0-rc4
• PrimeNG version: 7.1.0, verified on 9.0.0-rc1
• Browser: verified on [Chrome 79.0.3945.117 | Firefox 72.0.1 | Edge 79.0.309.65 | IE 11.535.18362.0]
• Language: [TypeScript 3.2.4 | ES6/7]
• Node (for AoT issues): node --version = v10.16.3

[Cito]

I can confirm this problem. Was able to solve it via PR #8742.

[cagataycivici]

Isn't it invalid to wrap with label, label has even no "for", why not use a div or similar instead.

[Cito]

It is actually valid and there are good reasons to do so, see my comment in #8742.

[GregKosmo]

By "for", I'm referring to the HTML label for Attribute. It links a text label to an input on a form, which improves accessibility for screen readers and allows the user to click the label to focus on the input. Wrapping a form control with a label is valid, and is part of the W3 specifications:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

The benefit for the programmer is that we then no longer have to come up with unique "id" and "for" combinations for our inputs and labels, which can get extremely difficult when using a *ngFor. Please reconsider.

[snotmare]

@cagataycivici Why was this issue closed? Currently, these primeng components are broken when following the W3 spec. Seems like an easy fix if @Cito has a PR for you. Please reopen and fix.

[cspowell1225]

@cagataycivici I'd second what @snotmare said. While you could write a div or something to fix, labels are modern syntactic sugar and those writing code would expect a primeng component to work with modern features.

[Cito]

@cspowell1225 It's actually not even a modern feature, it was already in the HMTL 4 specs, unfortunately it's just one of those details and tricks many people are not aware of (including me for a long time). I just hope @cagataycivici will not only look at new issues but also notice if we ping him in closed ones.

[Cito]

@cagataycivici Thank you for reopening this!

[GregKosmo]

Yes, thank you @cagataycivici ! It's greatly appreciated

[cagataycivici]

Thank you all for the feedback, let's improve the library together!

[Cito]

@cagataycivici Tested my app with the current PrimeNG version from the repository now and can confirm that your fix solved the wrapped-label issue. Thanks a lot!

[cagataycivici]

Glad to hear!