reactjsmaterial-uiuisearchbarmui-autocomplete

Moving placeholder text in Autocomplete component in React

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.

Solution

  • 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.