I'm using react-selectable-fast on a list of items that can be selected. However an item or a group of selected items should also be draggable, which is implemented using react-dnd.
The issue is that the selecting comes in the way of dragging; when hovering on top of an item and trying to drag it I end up selecting instead.
I've managed to fix the issue with a hack: store in state whether currently hovering an item or a group of selected items and if so disable the <SelectableGroup>. However this means that the whole list of items is rerendered every time I move the mouse over an item.
So I would like a better solution but I haven't been able to find one. In the last attempt I put the draggable element (using connectDragSource) on top of the selectable element (using createSelectable) again on top of <SelectableGroup /> and gave them increasing z-indexes, also tried playing around with stopPropagation() and preventDefault() but still the selecting overrides the dragging.
Any ideas?
Related
Let's say we use MUI Masonry and in each of the items there is a Collapse element that is expanded if it gets clicked. If you click an item that needs to be moved to another column, it moves the items outside the parent's specified width!
This CodeSandbox demonstrates the issue. The original view is like:
Now, after clicking the first item, which does not require moving, I see:
Which is what I expected, but if I click one of the items at the bottom that requires moving it, it creates a new column outside the parent's width.
At the moment dynamic height like that is not supported. See this issue.
I'm new to React and material-ui. I have an app I'm building where I want to be able to tab from an input field to a list and then move up and down the items with keyboard arrows.
It kind of works but when I tab to list the first ListItem and set it as selected it also takes on a focusVisible style.
Then when I move to the next item with the keyboard the focusVisible style remains on the first item while the selected item takes on a similar styling - which looks confusing.
I've tried everything I could to either drop this styling - disableRipple seemed like it might work but no luck.
I also tried forcing focus when setting selected, so that the same item is focused and selected, with refs but could not get that to work either.
I've recreated it in the codesandbox below.
https://codesandbox.io/s/material-demo-w6urc?file=/demo.js
I am trying to show an infinite scrolled list inside a material-ui Autocomplete dropdown list, using react-window-infinite-loader. When I scroll to the bottom of the list, I want to fetch the next page of items from the server. I created a codesandbox example which combines the material-ui Autocomplete example for a virtualized list with the react-window-infinite-loader example. When I scroll to the bottom of the list, the next page of data is loaded, however something is causing the list to scroll back to the top. How can I keep the scroll position after new data is loaded?
Thanks!
I got this to work by using the useAutocomplete hook. I created a sandbox which shows the working code:
https://codesandbox.io/s/material-demo-0fbyb
There is only one problem, that I still cannot figure out. When pressing the down arrow key on the keyboard to select items in the list, you can select items beyond the visible "window" of items. There must be a way to get the list to scroll to the selected item. I am guessing this is because the autocomplete ref needs to be set on the FixedSizeList component, but how can I do this when the InfiniteLoader also needs to pass a ref to the FixedSizeList component?
I'm trying to do something like below:
Scenario 1: User will drag and drop List 1 from left side to right side.
Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.
Finally, List 1 and List 2 both will be placed like left and right side.
With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh
I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.
Below is the sample work, I have to achieve:
Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)
I need a help on this to achieve this feature.Any idea on this really commendable.
I saw the code snippet and i added some new code that replicates your desired behavior.
The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.
Here is the updated code: https://stackblitz.com/edit/react-pctpdh
I have a Pivot layout with three items. One holds news for today, the second shows news for the week and in the third one you can search by date. If there aren't news for today yet, I show a message through a popup. I use a popup because I can put it over the datatemplate list.
The problem is that if I show the popup in the pivotitem for today news, it is shown in all other pivot items, but in code is inside the first pivot item only!
How can I solve this? Would you recommend me to use something different than a popup? I could hide the popup when pivot item is changed, but I want the message to remain visible in the item that has no news.
thank you!
There are known issues with regards to performance and rotation with the Popup control. My suggestion would be to use a Grid element and toggle it's visibility as and when required. For this overlay to be shown on top of the whole pivot (and not just the current item contents) you will need to put it at the same level in the visual tree as the pivot, and declared afterwards in the XAML to ensure that it appears on top. Other than that, it's just a case of showing/hiding it based on your logic and the selected pivot item.