react-absolute-grid icon indicating copy to clipboard operation
react-absolute-grid copied to clipboard

dragEnabled=true does not work with material-ui TextField in grid item component

Open muuhoffman opened this issue 6 years ago • 1 comments

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 avatar Oct 16 '18 04:10 muuhoffman

@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

novascreen avatar Apr 18 '19 18:04 novascreen