Fixed primefaces#733 - Rename defaultLabel to placeholder in MultiSelect

Author: cagataycivici

src/components/multiselect/MultiSelect.css

@@ -41,6 +41,11 @@
     overflow: hidden;
 }
 
+.p-multiselect .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
 .p-multiselect.p-disabled .p-multiselect-trigger,
 .p-multiselect.p-disabled .p-multiselect-label {
     cursor: auto

src/components/multiselect/MultiSelect.d.ts

@@ -9,7 +9,7 @@ interface MultiSelectProps {
     style?: object;
     className?: string;
     scrollHeight?: string;
-    defaultLabel?: string;
+    placeholder?: string;
     disabled?: boolean;
     filter?: boolean;
     tabIndex?: boolean;

src/components/multiselect/MultiSelect.js

@@ -18,7 +18,7 @@ export class MultiSelect extends Component {
         style: null,
         className: null,
         scrollHeight: '200px',
-        defaultLabel: 'Choose',
+        placeholder: null,
         disabled: false,
         filter: false,
         tabIndex: '0',
@@ -39,7 +39,7 @@ export class MultiSelect extends Component {
         style: PropTypes.object,
         className: PropTypes.string,
         scrollHeight: PropTypes.string,
-        defaultLabel: PropTypes.string,
+        placeholder: PropTypes.string,
         disabled: PropTypes.bool,
         filter: PropTypes.bool,
         tabIndex: PropTypes.string,
@@ -260,25 +260,6 @@ export class MultiSelect extends Component {
         return this.findSelectionIndex(this.getOptionValue(option)) !== -1;
     }
 
-    getLabel() {
-        let label;
-
-        if(this.props.value && this.props.value.length) {
-            label = '';
-            for(let i = 0; i < this.props.value.length; i++) {
-                if(i !== 0) {
-                    label += ',';
-                }
-                label += this.findLabelByValue(this.props.value[i]);
-            }
-        }
-        else {
-            label = this.props.defaultLabel;
-        }
-
-        return label;
-    }
-
     findLabelByValue(val) {
         let label = null;
 
@@ -386,24 +367,29 @@ export class MultiSelect extends Component {
         return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option.label;
     }
 
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
+    isEmpty() {
+        return !this.props.value || this.props.value.length === 0;
     }
 
-    renderHeader(items) {
-        return (
-            <MultiSelectHeader filter={this.props.filter} filterValue={this.state.filter} onFilter={this.onFilter}
-                onClose={this.onCloseClick} onToggleAll={this.onToggleAll} allChecked={this.isAllChecked(items)} />
-        );
+    getLabel() {
+        let label;
+
+        if (!this.isEmpty()) {
+            label = '';
+            for(let i = 0; i < this.props.value.length; i++) {
+                if(i !== 0) {
+                    label += ',';
+                }
+                label += this.findLabelByValue(this.props.value[i]);
+            }
+        }
+
+        return label;
     }
 
-    renderLabel() {
-        if(this.props.selectedItemTemplate) {
-            if(this.props.value && this.props.value.length) {
+    getLabelContent() {
+        if (this.props.selectedItemTemplate) {
+            if( this.props.value && this.props.value.length) {
                  return this.props.value.map((val, index) => {
                     return (
                         <React.Fragment key={index}>{this.props.selectedItemTemplate(val)}</React.Fragment>
@@ -419,6 +405,36 @@ export class MultiSelect extends Component {
         }
     }
 
+    renderTooltip() {
+        this.tooltip = new Tooltip({
+            target: this.container,
+            content: this.props.tooltip,
+            options: this.props.tooltipOptions
+        });
+    }
+
+    renderHeader(items) {
+        return (
+            <MultiSelectHeader filter={this.props.filter} filterValue={this.state.filter} onFilter={this.onFilter}
+                onClose={this.onCloseClick} onToggleAll={this.onToggleAll} allChecked={this.isAllChecked(items)} />
+        );
+    }
+
+    renderLabel() {
+        const empty = this.isEmpty();
+        const content = this.getLabelContent();
+        const className = classNames('p-multiselect-label', {
+            'p-placeholder': empty && this.props.placeholder, 
+            'p-multiselect-label-empty': empty && !this.props.placeholder && !this.props.selectedItemTemplate}
+        );
+
+        return (
+            <div className="p-multiselect-label-container">
+                <label className={className}>{content||this.props.placeholder||'empty'}</label>
+            </div>
+        );
+    }
+
     render() {
         let className = classNames('p-multiselect p-component', this.props.className, {'p-disabled': this.props.disabled});
         let label = this.renderLabel();
@@ -446,9 +462,7 @@ export class MultiSelect extends Component {
                 <div className="p-hidden-accessible">
                     <input readOnly type="text" onFocus={this.onFocus} onBlur={this.onBlur} ref={el => this.focusInput = el} />
                 </div>
-                <div className="p-multiselect-label-container" title="Choose">
-                    <label className="p-multiselect-label">{label}</label>
-                </div>
+                {label}
                 <div className="p-multiselect-trigger">
                     <span className="p-multiselect-trigger-icon pi pi-chevron-down p-c"></span>
                 </div>

src/showcase/multiselect/MultiSelectDemo.js

@@ -269,9 +269,9 @@ selectedCarTemplate(option) {
                             <td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
                         </tr>
                         <tr>
-                            <td>defaultLabel</td>
+                            <td>placeholder</td>
                             <td>string</td>
-                            <td>Choose</td>
+                            <td>null</td>
                             <td>Label to display when there are no selections.</td>
                         </tr>
                         <tr>