Fixed #1561 and #1560 - Improve SelectButton implementation

primefaces · Sep 10, 2020 · 9e3e838 · 9e3e838
1 parent 86041d5
commit 9e3e838
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/src/components/selectbutton/SelectButton.js b/src/components/selectbutton/SelectButton.js
@@ -13,6 +13,7 @@ export class SelectButton extends Component {
         options: null,
         optionLabel: null,
         optionValue: null,
+        optionDisabled: null,
         tabIndex: null,
         multiple: null,
         disabled: null,
@@ -32,6 +33,7 @@ export class SelectButton extends Component {
         options: PropTypes.array,
         optionLabel: PropTypes.string,
         optionValue: PropTypes.string,
+        optionDisabled: PropTypes.string,
         tabIndex: PropTypes.string,
         multiple: PropTypes.bool,
         disabled: PropTypes.bool,
@@ -52,7 +54,7 @@ export class SelectButton extends Component {
     }
 
     onOptionClick(event) {
-        if (this.props.disabled) {
+        if (this.props.disabled || this.isOptionDisabled(event.option)) {
             return;
         }
 
@@ -98,6 +100,10 @@ export class SelectButton extends Component {
         return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : (option['value'] !== undefined ? option['value'] : option);
     }
 
+    isOptionDisabled(option) {
+        return this.props.optionDisabled ? ObjectUtils.resolveFieldData(option, this.props.optionDisabled) : !!option['disabled'];
+    }
+
     isSelected(option) {
         let selected = false;
         let optionValue = this.getOptionValue(option);
@@ -152,10 +158,12 @@ export class SelectButton extends Component {
     renderItems() {
         if (this.props.options && this.props.options.length) {
             return this.props.options.map((option, index) => {
-                let optionLabel = this.getOptionLabel(option);
+                const isDisabled = this.props.disabled || this.isOptionDisabled(option);
+                const optionLabel = this.getOptionLabel(option);
+                const tabIndex = isDisabled ? null : 0;
 
                 return <SelectButtonItem key={`${optionLabel}_${index}`} label={optionLabel} className={option.className} option={option} onClick={this.onOptionClick} template={this.props.itemTemplate}
-                    selected={this.isSelected(option)} tabIndex={this.props.tabIndex} disabled={this.props.disabled} ariaLabelledBy={this.props.ariaLabelledBy} />;
+                    selected={this.isSelected(option)} tabIndex={tabIndex} disabled={isDisabled} ariaLabelledBy={this.props.ariaLabelledBy} />;
             });
         }
 

diff --git a/src/components/selectbutton/SelectButtonItem.js b/src/components/selectbutton/SelectButtonItem.js
@@ -46,8 +46,6 @@ export class SelectButtonItem extends Component {
                 originalEvent: event,
                 option: this.props.option
             });
-
-            this.input.focus();
         }
     }
 
@@ -60,16 +58,13 @@ export class SelectButtonItem extends Component {
     }
 
     onKeyDown(event) {
-        if (event.key === 'Enter') {
+        const keyCode = event.which;
+        if (keyCode === 32 || keyCode === 13) { //space and enter
             this.onClick(event);
             event.preventDefault();
         }
     }
 
-    componentDidUpdate() {
-        this.input.checked = this.props.selected;
-    }
-
     renderContent() {
         if (this.props.template) {
             return this.props.template(this.props.option);
@@ -90,13 +85,10 @@ export class SelectButtonItem extends Component {
         const content = this.renderContent();
 
         return (
-            <div ref={(el) => this.el = el} className={className} onClick={this.onClick} role="button" aria-pressed={this.props.selected} aria-labelledby={this.props.ariaLabelledBy}>
+            <div className={className} role="button" aria-label={this.props.label} aria-pressed={this.props.selected} aria-labelledby={this.props.ariaLabelledBy}
+                onClick={this.onClick} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex} onFocus={this.onFocus} onBlur={this.onBlur}>
                 {content}
-                <div className="p-hidden-accessible">
-                    <input ref={(el) => this.input = el} type="checkbox" defaultChecked={this.props.selected} onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}
-                        tabIndex={this.props.tabIndex} disabled={this.props.disabled} value={this.props.label}/>
-                </div>
-                <Ripple />
+                { !this.props.disabled && <Ripple /> }
             </div>
         );
     }