react-absolute-grid
react-absolute-grid copied to clipboard
dragEnabled=true does not work with material-ui TextField in grid item component
I am using material-ui along with AbsoluteGrid. When I have the TextField component in my grid item component, I cannot click on the TextField to select it and start editing text. Only with dragEnabled=false does this work. I believe this is because the AbsoluteGrid is eating the touch events in the onDrag function.
@muuhoffman curious whether you ever solved this, if not or for anyone else running into this, I've done the following. It's not pretty, but it works by wrapping createAbsoluteGrid
like this:
import createAbsoluteGrid from 'react-absolute-grid';
export default (...args) => {
const AbsoluteGridBase = createAbsoluteGrid(...args);
class AbsoluteGrid extends AbsoluteGridBase {
constructor(props, context) {
super(props, context);
const originalStartDrag = this.dragManager.startDrag.bind(this.dragManager);
this.dragManager.startDrag = (e, domNode, item, fnUpdate) => {
// Prevent preventDefault to allow focus on input
if (e.target.nodeName === 'INPUT') {
e.preventDefault = () => {};
}
originalStartDrag(e, domNode, item, fnUpdate);
};
}
}
return AbsoluteGrid;
};
it would be nice if one could define exceptions to the preventDefault behavior in the props instead