Does not work with React

[ir-fuel]

I wrote a react component that looks like this:

      <span>
        <div className="checkbox">
          <input
            className="checkbox"
            type="checkbox"
            id={this.props.id}
            defaultChecked={this.props.checked}
            onChange={this.toggle}
          />
          <label
            forHtml={this.props.id}
          >
          {this.props.name}
          </label>
        </div>
      </span>

onChange is never called.

When removing the checkbox class all works as expected.

[ir-fuel]

Seems I was using an outdated version of the css file. With the latest it works. The only issue is that the cursor does not show as a pointer.

edit: there is something weird going on. In the right part of the checkbox the cursor does show as pointer, but clicks do not get handled. When moving the cursor to the left it changes to the normal arrow, but clicks are correctly handled in that part.

This is what Chrome shows me. The blue is the input component (this is where the click works, but the cursor does not change), the orange part is the margin, and there we have the right cursor but clicking does not do anything.

[ir-fuel]

I seem to get this working by making the following modification to the CSS. No idea if this is the right way to go though:

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  opacity: 0;
  z-index: 1;
  transform: scale(1.5);
  cursor: pointer;
}

I added a 1.5 scale to the checkbox component and added a cursor type.

[DimaSavchenko]

Hi @ir-fuel ! Finally, What problems aren't solved ?
Thanks!

[ir-fuel]

The code I wrote simply doesn't allow me to click the checkbox, unless I start tampering with the CSS. The full explanation is in my first couple of posts here.