Fixed #957 - Add tabIndex prop to ToggleButton

primefaces · Jul 12, 2019 · b60682e · b60682e
1 parent f9f0217
commit b60682e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/togglebutton/ToggleButton.d.ts b/src/components/togglebutton/ToggleButton.d.ts
@@ -10,6 +10,7 @@ interface ToggleButtonProps {
     style?: object;
     className?: string;
     checked?: boolean;
+    tabIndex?: number;
     tooltip?: any;
     tooltipOptions?: TooltipOptions;
     onChange?(e: {originalEvent: Event, value: boolean}): void;

diff --git a/src/components/togglebutton/ToggleButton.js b/src/components/togglebutton/ToggleButton.js
@@ -14,6 +14,7 @@ export class ToggleButton extends Component {
         style: null,
         className: null,
         checked: false,
+        tabIndex: 0,
         tooltip: null,
         tooltipOptions: null,
         onChange: null
@@ -28,6 +29,7 @@ export class ToggleButton extends Component {
         style: PropTypes.object,
         className: PropTypes.string,
         checked: PropTypes.bool,
+        tabIndex: PropTypes.number,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
         onChange: PropTypes.func
@@ -125,7 +127,7 @@ export class ToggleButton extends Component {
         return (
            <div ref={(el) => this.container = el} id={this.props.id} className={className} style={this.props.style} onClick={this.toggle}>
                 <div className="p-hidden-accessible">
-                    <input ref={(el) => this.input = el} type="checkbox" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} />
+                    <input ref={(el) => this.input = el} type="checkbox" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex}/>
                 </div>
                 {(this.props.onIcon && this.props.offIcon) && <span className={iconStyleClass}></span>}
                 <span className="p-button-text p-unselectable-text">{this.props.checked ? this.props.onLabel : this.props.offLabel}</span>