clrSelect empty label tags are generated

[speti43]

Describe the bug

clrSelect directive generates empty label tags.

How to reproduce

https://stackblitz.com/edit/clr-form-select-without-label

Steps to reproduce the behavior:

1. Go to stackblitz
2. Inspect html above select

Expected behavior

Labels for select should only be generated when the user declares: `

I've got some options

<select clrSelect name="options" [(ngModel)]="options" required>

One

<option value="two">Two</option>
<option value="three">Three</option>

Helper text This field is required!

`

Versions

App

Angular CLI: 6.1.3 Node: 8.11.2 Clarity: 0.13 Device:

Type: Dell latitude E5550 OS: Windows 10 64bit Browser: Chrome - Version: 69.0.3497.92 (Official Build) (64-bit)

[youdz]

You're using [ngModel] to force the <select> to have an empty value on initialization (none of the options is pre-selected). This makes Angular create an empty option for the select that will disappear as soon as the user selects one of the valid options.

This has nothing to do with the Clarity select, you can see it happens with a plain HTML select too: https://stackblitz.com/edit/select-bind-invalid-option?file=src%2Fapp%2Fapp.component.html As you can see, the one binding an invalid initial value starts with a temporary empty option. That's just Angular.

I also added to this plunker the solution seemingly recommended by Angular, which is to add a disabled option with an empty value.

[speti43]

@youdz You are missing the point, I'm not complaining about the empty <option> tag. Please read the bug again carefully, and please reopen the bug.

[youdz]

Sorry I did misread. The empty labels are part of our component's template to ensure proper alignment of forms within our grid for all screen sizes due to the design of our responsive forms.

Why are they a problem to you? If you're using Angular components, you're accepting that they will create many HTML elements as part of their template. I'm not sure why this is an issue, could you please elaborate?

[speti43]

No problem. I'm implementing a grid view, and it does not require label for each controls: I can implement it without clarity angular controls, but I thought It's not intentional to generate the empty label tags.

[gnomeontherun]

I'm not sure I understand the exact issue here, we need the labels in some cases (like you have it set to horizontal layout, but vertical layout don't add extra labels). Your last screenshot shows lots of controls in a line, which wouldn't be a horizontal layout anyways so I'm not sure if your stackblitz example is representative of your issue, but here are some notes.

Do you want validation and/or helper text?

1. If so, you'll need the clr-select-container. Use vertical layout in the clrForm so it doesn't add a label. (It adds the label for horizontal and compact layouts only, for alignment purposes, and there is no way to disable it at the moment.)
2. If not, then just leave off the clr-select-container and no label will be added no matter what layout is used.

[speti43]

@gnomeontherun If you take a look at my stackblitz, you will see I didn't add clr-select-container, even so an empty label is generated. So just keep this simple, what I would like: <select clrSelect ....> should generate

<someContainers>...
   <select .... class="proper css classes">
</someContainers>

What I actulley get: <select clrSelect ....> generates

<label>Empty label which I dont need</label>
<someContainers>...
   <select .... class="proper css classes">
</someContainers>

[gnomeontherun]

Your stackblitz is using horizontal layout, so it will add the label. Because of the narrow size of a stackblitz window (usually), it actually triggers the vertical layout but the label exists. So as I said with option 1, use clrLayout="vertical" instead otherwise it will add the label.

The real issue is clrLayout="horizontal" causing the label for alignment reasons.

[speti43]

Problem solved, thank you for the guide! 👍

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.