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?
Related
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:
We have a list of values displayed using react-boostrap-table-next, and another list with same number of elements lets name it placeholder, we dont display the placeholder list using react-boostrap-table-next. There is some requirement where we want to automatically scroll the list displayed using react-boostrap-table-next, on scroll of the placeholder list.
I am wondering how it can be done?
I tried using refs to the list displayed using react-boostrap-table-next, but to no avail as it does not have the scrollTop property.
I have this component where I'm getting response data from api as an array. I'm then using the map function to iterate through it and display the data in a page successfully. Beside each record, I have an action button that should display single item's details in a react material ui dialog box. The problem is that I don't know how to select an individual item and instead the dialog box is returning all details for all items in the list. I'm using a functional component.
Actually I found a solution on this, I created a new state to hold an individual current id, used the filter method to get each element in the array and then loop through the list and return an individual item on the dialog content using the specific id.
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'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?