So I took the example react-mui has in the docs about having the autocomplete inside a custom popover demo here, but I replaced the popover with the Menu component because the popover gets cropped inside modals.
So the minimal code is something like this
The problem I'm experiencing is that if you write something inside the input box, then use the arrow keys for selecting an item, the input box gets blurred and so the autocomplete resets it. this behavior doesn't happen when using a popover.
Any suggestion on how to keep the input focused even when selecting an item using the keyboard arrow keys?
Related
So here's the thing. I want to show an array of buttons with correct and wrong value. After pressing those buttons I have a button that will show all tipps for pressed buttons. In docs it is written that I could pass to options object an object for the tippy props. And there I also found that I could specify trigger of displaying tippy using "trigger" and "triggerTarget" keys. I'm trying to pass a useRef instansce inside the "triggerTarget" and set the value of "trigger" to "manual" but it's just didn't work as I expected. What am I doing wrong?
example of my code (click on the first paragraph to console.log the ref)
https://codesandbox.io/s/react-wordcloud-callbacks-forked-cvml3l
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
I have a search box with an autocomplete wrapped around it using antd components and when the input is populated and you click the search button, the dropdown still shows. It doesnt hide itself. Here is the link to the codesandbox. These are the steps to reproduce:
Type in any text in the input.
click outside of the area on the black page to unfocus it
Click the search button
The dropdown shouldnt show again.
I'm using the material ui accordion component and I couldn't find a way to stop the panel from collapsing when clicked. My goal is to open and close the panel only by clicking the icon in the accordionsummery component. I found many ways to stop collapsing by click a checkbox for example, but not what I'm looking for.
With default Material-UI package ;
"No" way
Because, on AccordionSummary there is a context mechanism which watches if that Accordion is expanded and produces isExpanded as a value. You need to manipulate core package code the way you wanted, which is a long haul.
Btw, adding onClick function to ExpandMoreIcon gives infinite loop because of that context.
You can go with Additional actions version of Material-UI accordion and hide the checkbox as only viewing the data.
I'm trying to create a Material UI's Autocomplete component. Instead of showing suggestions of Autocomplete as dropdown, How can I show it as moving placeholder? The text inside the Autocomplete component should slide in left?
Code: https://codesandbox.io/s/material-demo-forked-mgg7z?file=/demo.js
The search results (The Godfather) should have a slide in left motion as a placeholder.
I created a custom hook useAnimatedPlaceholder in this demo
https://codesandbox.io/s/material-demo-forked-2em32?file=/demo.js
It can be easily inserted into any input base components. The functionality is achieved via using the useEffect and setTimeout combo. Let me know if you have any questions.
You can also give a text field inside autocomplete.