Fixed #9482 - Button | Renders empty label when the label is not defined

primefaces · Nov 8, 2022 · 8832a90 · 8832a90
1 parent 954104d
commit 8832a90
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/src/app/components/button/button.css b/src/app/components/button/button.css
@@ -26,10 +26,11 @@
     justify-content: center;
 }
 
-.p-button-icon-only .p-button-label {
+.p-button-icon-only:after {
+    content: 'p';
     visibility: hidden;
+    clip: rect(0 0 0 0);
     width: 0;
-    flex: 0 0 auto;
 }
 
 .p-button-vertical {
@@ -65,4 +66,4 @@
 .p-buttonset .p-button:focus {
     position: relative;
     z-index: 1;
-}
+}
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -1,8 +1,8 @@
-import { NgModule, Directive, Component, ElementRef, EventEmitter, AfterViewInit, Output, OnDestroy, Input, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, AfterContentInit, TemplateRef, QueryList } from '@angular/core';
-import { DomHandler } from 'primeng/dom';
 import { CommonModule } from '@angular/common';
-import { RippleModule } from 'primeng/ripple';
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { PrimeTemplate } from 'primeng/api';
+import { DomHandler } from 'primeng/dom';
+import { RippleModule } from 'primeng/ripple';
 
 type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
 
@@ -37,16 +37,17 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             this.createIconEl();
         }
 
-        let labelElement = document.createElement('span');
-        if (this.icon && !this.label) {
-            labelElement.setAttribute('aria-hidden', 'true');
-        }
-        labelElement.className = 'p-button-label';
+        if (this.label) {
+            let labelElement = document.createElement('span');
+            if (this.icon && !this.label) {
+                labelElement.setAttribute('aria-hidden', 'true');
+            }
+            labelElement.className = 'p-button-label';
+            labelElement.appendChild(document.createTextNode(this.label));
 
-        if (this.label) labelElement.appendChild(document.createTextNode(this.label));
-        else labelElement.innerHTML = '&nbsp;';
+            this.el.nativeElement.appendChild(labelElement);
+        }
 
-        this.el.nativeElement.appendChild(labelElement);
         this.initialized = true;
     }
 
@@ -118,7 +119,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
         this._label = val;
 
         if (this.initialized) {
-            DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label || '&nbsp;';
+            DomHandler.findSingle(this.el.nativeElement, '.p-button-label').textContent = this._label;
 
             if (this.loading || this.icon) {
                 this.setIconClass();
@@ -196,7 +197,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
                 *ngIf="!contentTemplate && (icon || loading)"
                 [attr.aria-hidden]="true"
             ></span>
-            <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate">{{ label || '&nbsp;' }}</span>
+            <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && label">{{ label }}</span>
             <span [ngClass]="badgeStyleClass()" [class]="badgeClass" *ngIf="!contentTemplate && badge">{{ badge }}</span>
         </button>
     `,