I have a simple react app with 2 components. On the left, there's a devExtreme list and on the right, there's a 'detail' pane. When I click an item in the list, I set a 'selectedItem' variable which is used by the right pane to show detail about this item. Now react rerenders - as it should - every time I change this variable (every time I click an item in the list). Now the list itself gets rerendered too so I lose the selection in the list. How should I tackle this problem? Thx
you can find the code here:
Related
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 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?
I have several list components in a tree-like data structure and I want to animate them in a way that when I click on an item, its children slide in from the right and at the same time the previous list slides out to the left.
I used an array for this with react-transition-group, if I add items to it, it works, but if I try to remove one from it, it fails.
I have a demo here:
https://codesandbox.io/s/k1wyqo64lo
If I uncomment line 91 path.shift() it stops animating.
How can I make them animate at the same time?
I am having some difficulty with my angularJs conversion.
Simply put, when a user clicks to expand a respective parent menu item, all the parent menu items expand to show the sub items. Obviously this is not what I am trying to achieve.
The end result I am looking for:
When a user clicks on a parent item, any current expanded node collapses and that respective parent node current clicked expands.
Really would be EXTREMELY grateful if someone could replicate my plunker to achieve the desired goals stated.
Thanks so much !!!!
My Plunker
You could do something like this:
http://plnkr.co/edit/6hKIcUAwpIePyjk1K7Ic?p=preview
Just keep track of the item that is expanded and store that on your scope. Then in your view you can just check if the current item in the ng-repeat is equal to the expanded item stored on the scope.
I have a nested list with a template by using getItemTextTpl. Template is simple it checks for a flag and if true it shows a button on a list item. If false show no button.
When on the list item I press the button (It's a delete button) I want to refresh that list item to not show the button. To make the button change I have to navigate up two levels and back down for it to update the list item.
My problem is getting the list item to refresh/Update. Can force the template to check the list item again etc? I can get the button to fire the event.
Thanks!
for the display layer:
why not just use css to apply/change the class of the delete button to hide it? then you don't have to refesh anything.
then you can programically set the value in your code, or send to the server to make sure the status is set when the view reloads at another point.