bokuweb
Latest release cannot detect onClick handler on Mobile
My browser is: Mobile Chrome and Mobile Safari on ios
Latest release breaks mobile onClick handler.
This is the props I pass into the component
<Rnd key={i} id={i} style={{ border:${border}, backgroundColor: "transparent", zIndex: ${Number(this.state.textitem[i].zIndex) + 22}, visibility: ${this.state.textitem[i].userInput.length > 0 ? "visible" : "hidden"} }} bounds={'.designBounds'} onClick={this.handleid}
Before the last 2 releases this function would work just fine with onClick
handleid = (e) => { var el2 = document.getElementById("scrollerText") if (el2 !== null) { el2.scrollTo(0, 0) } if (e.target.id) { this.setState({ textid: Number(e.target.id), activetext: true, activeimage: false, activeupload: false, activecut: false }); if (this.state.textitem[e.target.id].showborders) { this.setState({ textitem: update(this.state.textitem, { [e.target.id]: { showborders: { $set: false } } }) }); } if (!this.state.textitem[e.target.id].showborders) { this.setState({ textitem: update(this.state.textitem, { [e.target.id]: { showborders: { $set: true } } }) }); } } }
The strange thing is that if I had
<Rnd key={i} id={i} style={{ border:${border}, backgroundColor: "transparent", zIndex: ${Number(this.state.textitem[i].zIndex) + 22}, visibility: ${this.state.textitem[i].userInput.length > 0 ? "visible" : "hidden"} }} bounds={'.designBounds'} onClick={console.log('testing on click')}
then it works and the console logs "testing on click"
I work around I found is that I can take the functions content and insert it into one of the built in props like so
` onDragStart={(e, d) => { if (e.target.id.length < 3) { this.setState({ textitem: update(this.state.textitem, { [e.target.id]: { showborders: { $set: true } } }) });
this.setState({
textitem: update(this.state.textitem, {
[e.target.id]: {
x: { $set: d.x },
y: { $set: d.y }
}
})
});
var el2 = document.getElementById("scrollerText")
if (el2 !== null) {
el2.scrollTo(0, 0)
}
if (e.target.id) {
this.setState({
textid: Number(e.target.id),
activetext: true,
activeimage: false,
activeupload: false,
activecut: false
});
if (this.state.textitem[e.target.id].showborders) {
this.setState({
textitem: update(this.state.textitem, {
[e.target.id]: { showborders: { $set: false } }
})
});
}
if (!this.state.textitem[e.target.id].showborders) {
this.setState({
textitem: update(this.state.textitem, {
[e.target.id]: { showborders: { $set: true } }
})
});
}
}
}
}}`
I tested that just to understand more of the issue. However that work around doesn't work for my particular case because it prevents dragging overall (only on my mobile render this doesn't break anything) since the state change on my app causes a modal of full width and height to render at the highest z-index.
