Skip to content

Commit 2c2fb6e

Browse files
committed
Do not render label as part of input if label is empty (fixes google#57)
Having an empty label string results in surprising behavior. If there's no label, then the placeholder is always shown.
1 parent 687148d commit 2c2fb6e

File tree

3 files changed

+7
-2
lines changed

3 files changed

+7
-2
lines changed

mesop/components/input/e2e/input_app.py

+4
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ def app():
2020
me.textarea(
2121
label="Textarea", on_input=on_input, value="hello world", color="warn"
2222
)
23+
me.textarea(
24+
on_input=on_input,
25+
placeholder="Placeholder should display automatically when there is no label",
26+
)
2327
me.input(
2428
label="Number input", type="number", on_input=on_input, color="accent"
2529
)

mesop/components/input/input.ng.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
[subscriptSizing]="getSubscriptSizing()"
2121
[hintLabel]="config().getHintLabel()!"
2222
[style]="getStyle()"
23-
><mat-label>{{config().getLabel()}}</mat-label>
23+
><mat-label *ngIf="config().getLabel()">{{config().getLabel()}}</mat-label>
2424
@if(config().getIsTextarea()) {
2525
<textarea
2626
matInput

mesop/components/input/input.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,12 @@ import {Channel} from '../../web/src/services/channel';
1212
import {formatStyle} from '../../web/src/utils/styles';
1313
import {Subject} from 'rxjs';
1414
import {debounceTime} from 'rxjs/operators';
15+
import {CommonModule} from '@angular/common';
1516

1617
@Component({
1718
templateUrl: 'input.ng.html',
1819
standalone: true,
19-
imports: [MatInputModule, MatFormFieldModule],
20+
imports: [MatInputModule, MatFormFieldModule, CommonModule],
2021
})
2122
export class InputComponent {
2223
@Input({required: true}) type!: Type;

0 commit comments

Comments
 (0)