I am using react-dnd to implement drag and drop functionality in my code. The problem I am facing is that if I wrap my draggable components inside a Menu component. the drop functionality doesn't work while the drag works, but if I replace the Menu with a div, it works as expected.
Here's a Sandbox where the issue is demonstrated.
I have created a Dummy component which is essentially the Knight component and passed it in a mui Menu in Board.tsx. On opening the menu, the component is draggable as expected but not droppable.
Checkout to without-mui-menu branch, where I have replaced the whole menu thing with a div and it works as expected.
I went through react-dnd docs, and I just need to ensure there's a dnd-provider wrapped at the top level for it work, which I have done.
Does anybody have an idea what could be the issue?
Related
I am using material-ui as the UI package for an app.
In the app I'm using material-table with a custom infinite scroll.
When a row is clicked, a drawer opens from the right of the webpage.
Once the drawer opens, the background of the drawer (the infinite scroll table and general page) automatically scrolls back to the top of the page.
This makes this page very unfriendly to users.
I've tried the solutions that are mentioned here, but it doesn't seem to work.
I tried to use it like this:
<Drawer ModalProps={{disableRestoreFocus: true}} disableRestoreFocus>{content}</Drawer>
I couldn't find anymore information on material-ui github, or here on stack overflow.
Has anyone encountered this issue or know any other options I can try?
Thanks in advance.
For material-ui v4, you can add this attribute on the drawer component:
disableScrollLock={true}
I'm trying to create a nested navigation menu with react and
material-ui by following an example I saw on css-tricks but I'm mainly getting stock on how to make the first menu render the second menu when I click one of the arrow links.
I have created a sandbox here with the code since it will be easier nested-navigation-menu
Here is the css-tricks article. Here the menu is one level deep, but I would like to make it two level deep.
Thanks in advance
I am using Ionic + React to create an app. In the docs for ion-modal, it is said that
In most scenarios, setting a ref on IonPage and passing that ref's current value to presentingElement is fine
However, I am not sure how to do this. If I just pass the IonPage component as the children of the modal it works fine, but there is a weird transition (the modal tries to go from bottom to top but the ion page tries to go from right to left). So I am not sure if using this ref on the Ion Page would solve this particular issue.
I am using Material UI and designed a React Auto Suggest component.
Please go to stackblitz example from below link.
https://stackblitz.com/edit/autosuggest-scrollbar-issue
To reproduce the issue type "a" in the input, after options are loaded go to the last option from the keyboard's arrow key. option is highlighted but scrollbar does not move.
Unfortunately, I am not able to find anything related to scrolling the container. Any leads please..
I have a list in a drawer that is docked to the browser screen (desktop) and I want to expand the content of the list item to fill the entire drawer when I click on it just like explained in this demo:
I could find ways of doing it using Android but not using react material-ui V1.0.
Has anyone already done something like it?