schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-26 18:50:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix for checkboxes within non-clickable label

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/Block.jsx
View file

@ -51,35 +51,34 @@ 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>
<div className="maputnik-input-block-action">
{this.props.action}
</div>
<div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
{this.props.children}
</div>
</label>
</div>
<div className="maputnik-input-block-label">
{this.props.label}
</div>
<div className="maputnik-input-block-action">
{this.props.action}
</div>
<div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
{this.props.children}
</div>
</label>
}
}

7
src/components/InputCheckbox.jsx
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">