Fixed #1698 - MultiSelect implement SelectItem disabled

primefaces · Jan 28, 2021 · 92006a9 · 92006a9
1 parent 080abdc
commit 92006a9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/multiselect/MultiSelect.css b/src/components/multiselect/MultiSelect.css
@@ -1,6 +1,5 @@
 .p-multiselect {
     display: inline-flex;
-    cursor: pointer;
     position: relative;
     user-select: none;
 }
@@ -10,6 +9,7 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    cursor: pointer;
 }
 
 .p-multiselect-label-container {

diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -677,7 +677,7 @@ export class MultiSelect extends Component {
                 let optionLabel = this.getOptionLabel(option);
 
                 return (
-                    <MultiSelectItem key={optionLabel + '_' + index} label={optionLabel} option={option} template={this.props.itemTemplate}
+                    <MultiSelectItem key={optionLabel + '_' + index} label={optionLabel} option={option} disabled={option.disabled} template={this.props.itemTemplate}
                     selected={this.isSelected(option)} onClick={this.onOptionClick} onKeyDown={this.onOptionKeyDown} tabIndex={this.props.tabIndex} />
                 );
             });

diff --git a/src/components/multiselect/MultiSelectItem.js b/src/components/multiselect/MultiSelectItem.js
@@ -10,6 +10,7 @@ export class MultiSelectItem extends Component {
         option: null,
         label: null,
         selected: false,
+        disabled: false,
         tabIndex: null,
         template: null,
         onClick: null,
@@ -20,6 +21,7 @@ export class MultiSelectItem extends Component {
         option: PropTypes.any,
         label: PropTypes.string,
         selected: PropTypes.bool,
+        disabled: PropTypes.bool,
         tabIndex: PropTypes.number,
         template: PropTypes.any,
         onClick: PropTypes.func,
@@ -53,13 +55,14 @@ export class MultiSelectItem extends Component {
     }
 
     render() {
-        const className = classNames('p-multiselect-item', { 'p-highlight': this.props.selected }, this.props.option.className);
+        const className = classNames('p-multiselect-item', { 'p-highlight': this.props.selected, 'p-disabled': this.props.disabled }, this.props.option.className);
         const checkboxClassName = classNames('p-checkbox-box', { 'p-highlight': this.props.selected });
         const checkboxIcon = classNames('p-checkbox-icon p-c', { 'pi pi-check': this.props.selected });
         const content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
+        const tabIndex = this.props.disabled ? null : this.props.tabIndex;
 
         return (
-            <li className={className} onClick={this.onClick} tabIndex={this.props.tabIndex} onKeyDown={this.onKeyDown} role="option" aria-selected={this.props.selected}>
+            <li className={className} onClick={this.onClick} tabIndex={tabIndex} onKeyDown={this.onKeyDown} role="option" aria-selected={this.props.selected}>
                 <div className="p-checkbox p-component">
                     <div className={checkboxClassName}>
                         <span className={checkboxIcon}></span>