Fix for checkboxes within non-clickable label

This commit is contained in:
orangemug 2020-06-10 19:20:42 +01:00
parent b83c9a1ad9
commit 06bccfab10
2 changed files with 20 additions and 16 deletions

View file

@ -51,24 +51,24 @@ export default class Block extends React.Component {
const nativeEvent = event.nativeEvent;
const contains = this._blockEl.contains(el);
if (event.nativeEvent.target.nodeName !== "INPUT" && contains) {
if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
event.stopPropagation();
event.preventDefault();
}
event.preventDefault();
}
render() {
const errors = [].concat(this.props.error || []);
return <div style={this.props.style}
return <label style={this.props.style}
data-wd-key={this.props["data-wd-key"]}
className={classnames({
"maputnik-input-block": true,
"maputnik-input-block--wide": this.props.wideMode,
"maputnik-action-block": this.props.action
})}
onClick={this.onLabelClick}
>
<label onClick={this.onLabelClick}>
<div className="maputnik-input-block-label">
{this.props.label}
</div>
@ -79,7 +79,6 @@ export default class Block extends React.Component {
{this.props.children}
</div>
</label>
</div>
}
}

View file

@ -12,13 +12,18 @@ export default class InputCheckbox extends React.Component {
value: false,
}
onChange = () => {
this.props.onChange(!this.props.value);
}
render() {
return <div className="maputnik-checkbox-wrapper">
<input
className="maputnik-checkbox"
type="checkbox"
style={this.props.style}
onChange={e => this.props.onChange(!this.props.value)}
onChange={this.onChange}
onClick={this.onChange}
checked={this.props.value}
/>
<div className="maputnik-checkbox-box">