fix(formfield): hide undefined html title (#620)

allianz · Jun 30, 2022 · 95f6f60 · 95f6f60
1 parent 609b08b
commit 95f6f60
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 5 deletions.
diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -394,7 +394,7 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
             return '';
         }
 
-        return this.overlayLabel ? this.overlayLabel : this.formFieldComponent ? this.formFieldComponent.label : '';
+        return this.overlayLabel ? this.overlayLabel : this.formFieldComponent?.label ?? '';
     }
 
     /** Comparison function to specify which option is displayed. Defaults to object equality. */

diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts
@@ -56,7 +56,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
         return this._formFieldComponent?.appearance;
     }
 
-    get _overlayLabel(): string {
+    get _overlayLabel(): string | null | undefined {
         return this._formFieldComponent?.label;
     }
 

diff --git a/projects/ng-aquila/src/formfield/formfield.component.html b/projects/ng-aquila/src/formfield/formfield.component.html
@@ -24,7 +24,7 @@
                     <ng-content select="[nxFormfieldPrefix]"></ng-content>
                 </div>
 
-                <div class="nx-formfield__input" [title]="label">
+                <div class="nx-formfield__input" [title]="label ?? ''">
                     <!-- This handles the floating whole behavior -->
                     <span class="nx-formfield__label-holder">
                         <label class="nx-formfield__label" [id]="labelId" [attr.aria-owns]="_control.id" [attr.for]="_control.id">

diff --git a/projects/ng-aquila/src/formfield/formfield.component.ts b/projects/ng-aquila/src/formfield/formfield.component.ts
@@ -87,7 +87,7 @@ export class NxFormfieldComponent implements AfterContentInit, AfterContentCheck
      * Sets the label which will act as a floating label.
      * In addition, the component uses input and label to properly support accessibility.
      */
-    @Input('nxLabel') label!: string;
+    @Input('nxLabel') label?: string | null;
 
     @ContentChild(NxFormfieldLabelDirective) _labelChild!: NxFormfieldLabelDirective;
     @ContentChildren(NxFormfieldHintDirective) _hintChildren!: QueryList<NxFormfieldHintDirective>;

diff --git a/projects/ng-aquila/src/table/sort-header/sort-header.component.html b/projects/ng-aquila/src/table/sort-header/sort-header.component.html
@@ -1,4 +1,4 @@
-<div #focusContainer class="nx-sort-header__focus-container" role="button" tabindex="0" [attr.title]="_getTitle()" aria-live="polite">
+<div #focusContainer class="nx-sort-header__focus-container" role="button" tabindex="0" [title]="_getTitle()" aria-live="polite">
     <div class="nx-sort-header__icons-container" [attr.aria-label]="_getAriaLabel()">
         <nx-icon name="chevron-up-small" class="nx-sort-header__icon-up" [class.nx-sort-header__hidden-icon]="_isSortedDescending()"> </nx-icon>
         <nx-icon name="chevron-down-small" class="nx-sort-header__icon-down" [class.nx-sort-header__hidden-icon]="_isSortedAscending()"> </nx-icon>