input type=checkbox not rendered correctly if nested in html a-tag

[Ogglas]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

I have a peculiar problem with using a html a-tag with input type=checkbox from React. The thing is that if I click directly on the checkbox and not the a-tag the checkbox will not re-render correctly but my state has updated.

Example: Given the code below I render the component and click directly on the checkbox. In this case showMap will be set to false since we set it to true in the constructor but the checkbox will still be checked in the html view. If I however click on the a-tag but not directly on the checkbox both the state showMap is updated correctly as well as the view.

I can make it work by not calling event.preventDefault(); in toggleCheckbox but if I do that the app will scroll to the top of the page if I click on the a-tag.

Example:

https://codesandbox.io/s/w2x8vqq8xl

Code:

import React from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center",
  //marginTop: "1000px"
};

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMap: true
    };
  }

  toggleCheckbox = event => {
    this.setState({ showMap: !this.state.showMap });
    event.preventDefault();    
  };

  render() {
    return (
      <div>
        <h1>{this.state.showMap ? "Show" : "hide"}</h1>
        <a href="#" role="button" onClick={this.toggleCheckbox}>
          <input
            type="checkbox"
            title="test"
            name="showMap"
            checked={this.state.showMap}
            readOnly
          />
          Show map
        </a>
      </div>
      
    );
  }
}

const App = () => (
    <div style={styles}>
      <Menu />
    </div>
);

render(<App />, document.getElementById("root"));

What is the expected behavior?

When I press the checkbox it should update visually.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16, Chrome, Windows.

[nhunzaker]

This appears to be browser native behavior:
https://codepen.io/nhunzaker/pen/WXONQK

I'm not sure there's anything React can do here. Additionally, I'm curious about using an anchor tag in this way. What if you used a label?

<label htmlFor="showMap">
  <input type="checkbox" id="showMap" name="showMap" onChange={this.handleChange} /> Show map
</label>

This prevents the need to prevent the default action for the anchor tag. Using a label ensures that clicking "show map" will activate the checkbox. It also helps out screen readers.

[gaearon]

Yeah, it doesn’t seem like React is doing anything wrong here.

[Ogglas]

Thanks for replies. I noticed the behavior when I used React-Bootstrap. I will have to solve it some other way. react-bootstrap/react-bootstrap#2876