Switch should behave like Checkbox -- some suggestions...

[JavaTiger13]

Hello,

i like this component and i have the following enhancements to suggest:

1. Component should not propagate events, after consumption! => e.preventDefault();

2. Dragability for web Client unecesary with bad user responsabilty behavior
   => Should be turned off by property, eg: dragable= false // (default true)

3. Arrow Keys LEFT and RIGHT were bound to this component, but many times needed in application for other purposes
   => should optional, I would expect like on all selectable Form Elements that SPACE would select and unselct like in a checkbox
   eg: keyboardMode= [Arrows|Space|None]
   here my contibution (not including tristate):

        case 32:
            if(this._getValue() !== null && this._getValue() === true){
                e.preventDefault();
                return this._setValue(false);
            } else if(this._getValue() !== null && this._getValue() === false){
                e.preventDefault();
                return this._setValue(true);
            } else {
                // ignore tristate
            }
            break;
   

i also generalized the event and get rid of dedicated events for ON and OFF:
_handleToggleClick(){
if(this._disableUserInput())
return;

    if(this._getValue() !== null && this._getValue() === true) {
        this._setValue(this.props.tristate ? (this._getValue() == null) : false);
    } else  if(this._getValue() !== null && this._getValue() === false) {
        this._setValue(this.props.tristate ? (this._getValue() == null) : true);
    }

    this._setFocus();
}

(dont forget in renderLabel => onClick: this._handleToggleClick.bind(this))

4. as the value behind the Component (excluding tristate) is true / false, the expectation of a user is the one from a checkbox / readiobutton to select / unselect by using the SPACE key, which was not supported

5. the tabindex was not propagated, which in Formular Based Apps is a NO GO!

Switch.defaultProps = {
tabIndex: 0
}
Switch.propTypes = {
tabIndex: PropTypes.number,
}

in render()
in the wrapper Params:
tabIndex: ${tabIndex},

[gtwilliams03]

I second the need for tabIndex to be propagated to avoid a tab stop for forms, i.e., tabIndex={-1}