Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
muuhoffman opened this issue Oct 16, 2018 · 1 comment

Comments

@muuhoffman
Copy link

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.

@novascreen
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants