Do not render label as part of input if label is empty (fixes #57)

Having an empty label string results in surprising behavior. If there's no label, then the placeholder is always shown.
google · Feb 20, 2024 · 2c2fb6e · 2c2fb6e
1 parent 687148d
commit 2c2fb6e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/mesop/components/input/e2e/input_app.py b/mesop/components/input/e2e/input_app.py
@@ -20,6 +20,10 @@ def app():
   me.textarea(
     label="Textarea", on_input=on_input, value="hello world", color="warn"
   )
+  me.textarea(
+    on_input=on_input,
+    placeholder="Placeholder should display automatically when there is no label",
+  )
   me.input(
     label="Number input", type="number", on_input=on_input, color="accent"
   )

diff --git a/mesop/components/input/input.ng.html b/mesop/components/input/input.ng.html
@@ -20,7 +20,7 @@
   [subscriptSizing]="getSubscriptSizing()"
   [hintLabel]="config().getHintLabel()!"
   [style]="getStyle()"
-  ><mat-label>{{config().getLabel()}}</mat-label>
+  ><mat-label *ngIf="config().getLabel()">{{config().getLabel()}}</mat-label>
   @if(config().getIsTextarea()) {
   <textarea
     matInput

diff --git a/mesop/components/input/input.ts b/mesop/components/input/input.ts
@@ -12,11 +12,12 @@ import {Channel} from '../../web/src/services/channel';
 import {formatStyle} from '../../web/src/utils/styles';
 import {Subject} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
+import {CommonModule} from '@angular/common';
 
 @Component({
   templateUrl: 'input.ng.html',
   standalone: true,
-  imports: [MatInputModule, MatFormFieldModule],
+  imports: [MatInputModule, MatFormFieldModule, CommonModule],
 })
 export class InputComponent {
   @Input({required: true}) type!: Type;