Is it possible to access any prop to minimize the dropdown after a node is selected. My use-case is to select only nodes in the deepest level and leaving parent nodes disabled. On selection of a single node, the expected behaviour would be to minimise the dropdown, instead of clicking outside. Can this be achieved with JavaScript without leveraging CSS?
Related
I have a custom filter component I'm giving Ag grid for each column. The component contains a dropdown. When user selects an option from dropdown, the filter closes immediately on selection rather than staying open like it should.
How can I keep the filter component to stay open on selection of option from dropdown?
Reading the docs more, I found the answer here:
https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element
Custom Filters Containing a Popup Element
Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.
There are two ways you can get fix this problem:
Add a mouse click listener to your floating element and set it to
preventDefault(). This way, the click event will not bubble up to the
grid. This is the best solution, but you can only do this if you are
writing the component yourself.
Add the ag-custom-component-popup CSS
class to your floating element. An example of this usage can be found
here: Custom Date Component
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.
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?
My app forms utilize the enter button to tab to specified fields for speed on a ten-key keyboard. When enter is hit, we do a DOM lookup and trigger focus() on the next element. This works great on text fields but I cannot understand how to accomplish this on a Select box in Material UI Beta#1.0.0-beta.21. I can get each of the DOM elements that make up the Select structure, but triggering focus() at any level does nothing.
Note: I am able to grab the ref of the item via inputRef on the select to prevent us from traversing the DOM but it still yields no results.
Question on GitHub: https://github.com/callemall/material-ui/issues/9182#issuecomment-345148074
Code Sandbox example: https://codesandbox.io/s/m43qqyo2zy
The node passed to Select.props.inputRef() references a hidden input. You would need to focus() on the div that is rendered as its sibling. Also, you need to handle the Select element case first in handleKeyPressInternal() because getElementsByName() will return the input.
This doesn't feel right, though, because you are relying on Select to render the focusable div as its immediate sibling. Could be grounds to extend inputRef() on Select to return the node that can visually receive focus.
https://codesandbox.io/s/zooz41oo3
I am trying to set up mouse events for an element stamped out by dom-repeat. The event should trigger a style change for a different element in the dom-repeat template, basically just a color change for an icon in a box on a box hover.
As automatic node finding is not available for dynamic nodes, the docs say I should use the $$ selector.
However, $$ only returns the first node in the local DOM that matches selector, and I want the hover effect for all boxes stamped out by the dom-repeat.
As $$ selects an element's property, that leaves me thinking I would need to set up a dynamic attribute for the icon from the dom-repeat, so that I can select every repeated icon instance in the mouse event change functions.
The repeater gives me the index, but how would I set a dynamic property with it, instead of a dynamic value?
What am I missing?
This should do what you want:
var nodes = Polymer.dom(this.root).querySelectorAll(...)
If you modify the DOM you might need to use the Polymer.dom(...) API for the individual nodes you are modifying.
Polymer.dom(nodes[i])...