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.
Related
I am new to Next JS and I have a custom select menu dropdown with an array of options. The select has an arrow icon that I included by using css psudo ::after with background image. When the user clicks the icon(svg), the dropdown is not triggered and I am not sure how to make this work.
I have tried using useRef and setting it to the component then on button click I tried to use ref.current.click() which doesnt trigger the drop down.
I also tried including the arrow icon inside the component rather than use CSS but this was unsuccessful as well.
Can someone please advise me how to make this functionality work? Thank you in advance for any help, it is much appreciated.
I am working on Material UI Autocomplete with react to have a dynamic dropdown list. When i click on the reset button, i want to reset the value in the autocomplete to be set to the default value. I have been looking everywhere for a solution, but have not been able to find one.
Any suggestions / solutions are welcome.
Thanks in advance.
Have you used a changing key on your Autocomplete? This will allow you to recharge only this one.
I'm using dagre-d3 library for creating a flow path. I need to have custom component for every label but its not rendering react components, it however does render properly if the label is simple html. What do I need to do?
Following is a sample of what I'm trying to achieve, the first node should be the component but its rendering a simple empty box in place of that:
CodeSandbox URL
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?
How should the second parameter of the React TestUtils.Simulate.change.(MyDropdown, ???) look like to trigger a change, where MyDropDown is a component based on Material UI Dropdown component. If I don't provide any second parameter it looks like it returns a random Hash key instead of the provided MenuItem key.