Wikiki/bulma-switch

Switch is not switching

Opened this issue · 6 comments

donfiftyidaho commented

When I try to use my switch like the one in the demo, it doesn't move.

I can see it register the click in my handler when I click it or use the spacebar when it's focused.

Since I'm loading these dynamically, I'm generating my id, name and label "for" with all the same value, IE: isActive-n.

The switch is loading properly on the page, it looks great, it just doesn't move. I've tried a few different id/lable value formats and nothing works yet.

Here is the switch part of my react component:

      <div className="column is-2">
          <div className="field is-pulled-right">
            <input
              id={`isActive-${props.id}`}
              type="checkbox"
              name={`isActive-${props.id}`}
              className="switch is-success is-rounded"
              checked={checked}
              onChange={swithOnChangeHandler}
            />
            <label htmlFor={`isActive-${props.id}`}>{label}</label>
          </div>
        </div>
donfiftyidaho commented

It was a problem with the state of the input checked property. Also, now using true or false for the checked value

reinux commented

It was a problem with the state of the input checked property. Also, now using true or false for the checked value

Can you explain what you mean by this? How did you get it working?

donfiftyidaho commented

I'll try and remember, but it was many projects ago.
Here is my final use of switch, this is in a component that creates a row in a list of items. The switch is to activate or disable the item.

To clarify, it was how I was setting the state onChange and I was using 1 or 0, changed that to using true or false, which seems to make a difference. I hope the code sample helps.

// current state of switch from database
const initActive = props.is_active === 'false';

const [isActive, setIsActive] = useState(initActive);

// here the checkVal is set using true/false, not 1/0
if (isActive) {
    label = 'Activate';
    checkVal = false;
  } else {
    label = 'Active';
    checkVal = true;
  }

const handleSwitchChange = index => {
    setIsActive(index);
    setIsDisabled(false);
  };

<input
     id={`isActive-${props.id}`}
     type="checkbox"
     name={`isActive-${props.id}`}
     className="switch is-success is-rounded is-small"
     checked={checkVal}
     onChange={() => handleSwitchChange(checkVal)} // handle onChange differently
/>
  • 👍1
reinux commented

Thanks, I finally figured out what was wrong in my case: it needs an adjacent label element, and it needs to have an id and a for on the label. Otherwise it doesn't do anything.

  • 👍4
  • 😄1
silentrob commented

My issue was coping the html code to react. label for element needs to be changed to htmlFor

  • 👍1