Material-ui: Link in Checkbox label

[peteruithoven]

Problem description

With the current styling it seems impossible to have elements with their own events (lik a link) inside the label of a Checkbox component.
The input html element is placed on top of the div with the label (with link), and has the same size. This makes it impossible to receive events from elements in the label.

Steps to reproduce

Create a CheckBox with a label that contains a link.

import React from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Checkbox from 'material-ui/Checkbox';

function onCheck(event) {
  console.log('onCheck: ', event); // always called
}
function onLinkClick(event) {
  console.log('onLinkClick'); // never called
}
const label = (
  <span>I have read and agree to the&nbsp;
    <a
      href="/terms_and_conditions"
      target="_blank"
      onClick={onLinkClick}
    >
      Terms and Conditions
    </a>
  </span>
)

render(
  <MuiThemeProvider>
    <Checkbox label={label} onCheck={onCheck} />
  </MuiThemeProvider>,
  document.getElementById('app')
)

Versions

• Material-UI: 0.16.0
• React: 15.3.2
• Browser: Chromium 53.0.2785.143

[lucasbento]

This happens because the input is in front of the label: http://www.webpackbin.com/4yjz3oEAZ

A higher z-index fixes this issue but the checkbox does not trigger when clicking on the label.

[peteruithoven]

Yep. I'm curious why. With old school html the label would get a for attribute with the id of the input element. That way you could also click on the label.
In this case, why not (also) add the event handler on the label?

[peteruithoven]

@lucasbento Thanks for that webpackbin tool! I was trying to share my example using http://esnextb.in but that currently fails with React (com/voronianski/esnextbin/issues/5).

[lucasbento]

@peteruithoven: that's a good idea, would you mind submitting a PR for it?

Haha, no problem, it's a great tool, also open-source: https://github.com/christianalfoni/webpack-bin 😉

[jwwisgerhof]

I am not versed in React well enough to make a PR (coming from Angular, started yesterday), but found it easy enough to work around by creating a new element that wraps around the Checkbox:

https://gist.github.com/jwwisgerhof/75b5b60e2c86a975e64e09a17035245a

I think simply wrapping the input with a label will be enough to fix all issues. All that should have to change in the Checkbox code is the wrapper element. This way we avoid event handlers, ID attributes, the 'for' attribute, etc.

(obviously the above example does not take into consideration label styles, label placement and all the other options, I simply don't need them for these links)

[joshunger]

Here is the z-index fix -

const anchorStyle = {
  position: 'relative',
  zIndex: 3,
}

[MathieuLorber]

I associated the z-index fix with a label & the for attribute

<Checkbox id={uniqueId}
          labelStyle={{ zIndex: 3 }}
          label={(
                    <label htmlFor={uniqueId}>
                              blah blah
                              <span onClick={this.myAction}>yeah</span>
                    </label>
          )}/>

Still it's not perfect. For example, there's no checkbox animation when I click on the label.

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[sunlee-newyork]

Thanks @lucasbento, the z-index fixed it easy-peasy. Cheers!

[SND89]

I had the same problem, but after a short 'inspection' I found out that actually Bootstrap had conflict. Watch out when using both. I was doing some tests with some alpha / beta.
bootstrap/4.0.0-beta.2

"@material-ui/core": "^3.9.1",
"@material-ui/icons": "^3.0.2",
"@material-ui/styles": "^3.0.0-alpha.9"

My label looks like:

const label = ( <div> <span>I accept the </span> <Link to={'/terms'}>terms of use</Link> <span> and </span> <Link to={'/privacy'}>privacy policy</Link> </div> )