Using material-ui/lab 4.0.0-alpha.27 - TreeView Component
I have a treeview with a couple of hundred nodes. I have added a textfield before the treview that the user can use to search/filter the tree. As they type I add/remove classes from the TreeItems to hide and show TreeItems. It works fine BUT we want all of the nodes to be expanded once they enter something into the search/filter textfield.
I have tried feeding the "defaultExpanded" prop a new list that has all of the nodes in it but it doesn't seem to cause the nodes to expand as I had expected. The defaultExpanded prop only seems to be respected when the tree initially draws.
I am currently working around this by looking for collapsed nodes and firing click events for them to force them to open but that is causing issues (the textfield looses focus and the keyboard hides and the treeview jumps around). I need something a bit smoother.
You need to use the expanded prop, instead of defaultExpanded.
Related
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 figure out how to work around what appears to be greedy-focus issues with react-select.
I'm using custom components in my MenuList component that need the focus to work (rc-slider). Basically, I'd like the select to support an additional value for each option and I'm using a Slider to do that.
The issue with the sliders is that I can click on them to change the value, but can't drag the handles, as the Select seems to take back the focus (and even close the drop-down if menuIsOpen is not controlled).
The select does need to re-render when the values change, but I can't figure out why the focus has to change.
https://codesandbox.io/s/epic-moon-cv33b
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've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.
The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.
Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?
Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.
Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D