CSS help for a custom select component

🤝 Discussion
,
1

I have a use case where I want to hit an api using the input provided to a select component. The Cascase Select is the ideal component I want to use, since my api returns several available categories with each category holding relevant data. However, the cascade select does not have an inputChange event using which I can send a request to my api with the inputValue.

To get around this, I'm trying to build a custom search module with a text box to enter the input, and a listView component to map the options returned. However, the listView component pushes the components below it further down the page which I don't want

I have tried setting the z index for the classes to create different layers but this does not work.

Would appreciate it if anyone has a fix or ideas to fix this. Thanks!

2

Hi @naijoesrinivasan, and welcome to the forum! Creating a search module is a great idea, but the listView component is generally going to take up physical space on the canvas.

One workaround could be to display the listView in a modal, so that when you enter an input the listView will pop up and won't move any of your components around. The only issue with a modal is there isn't much customization for it's positioning, but that might not be a problem for you.

Another way to achieve this could be to try and create a custom react component that performs exactly what you're looking for.

Let me know if this helps!