feat: Use floating-ui/react for the autosuggest input in the pixel code sample #24
Conversation
anandgorantala
changed the title
| @@ -5,6 +5,7 @@ | |||
| ], | |||
| "rules": { | |||
| "camelcase": "off", | |||
| "react/jsx-props-no-spreading": "off", | |||
There was a problem hiding this comment.
I sometime just hate the arbitrary opinions in eslint, this is one of them.
There was a problem hiding this comment.
Yes, I need to switch this to one of the standard eslint configs, haven't gotten around to it yet, but I will in the next couple of weeks
There was a problem hiding this comment.
The changes look good to me.
I do find that the use floating-ui is adding some new abstractions such as Floating manager, which are a little less straightforward than the previous code. It is pretty easy to figure out what those are, but does require me a little extra work to understand it.
What are the major motivation to use floating-ui? Is it just much easier for building the UI we want?
|
The floating-ui library adds keyboard navigation and handling of the pop up, it's positioning, etc. This change serves as a proof of concept for the new search bar component. That will encapsulate a lot of the code that's in the SearchBar component right now. Once that component is ready, it will replace most of the current SearchBar component code |
Prototypes using the floating-ui/react library to setup the search input with autosuggest with keyboard support. Using this as an example to inform the API of the Search input component
Preview: https://codesandbox.io/p/devbox/next-js-x7lvq6