The left one works in this example works as it has no Color.background, while the right one does not show the text that is typed into the input field. Notice also on line 94, where I have added a z-index in order to see the selected value. If this is removed the selected value hides behind the background of the element.
In order to get the search term visible I have overridden with the following css :
That tweak together with adding z-index to the Input.SelectedInBox state makes it behave as expected.
So It seems like the core of this problem is down to z-index.
The big picture of what I'm trying to do
Add a Input.autocomplete selectbox with styling.
What I did
Added a Input.autocomplete which has a Color.background set.
What I Expected To Happen
See both the text I type and the subsequent selected value.
What Actually Happened
https://ellie-app.com/dP7TYc5DKa1/2
The left one works in this example works as it has no Color.background, while the right one does not show the text that is typed into the input field. Notice also on line 94, where I have added a z-index in order to see the selected value. If this is removed the selected value hides behind the background of the element.
In order to get the search term visible I have overridden with the following css :
.focus-override { color: white !important; background: rgb(54, 66, 83); z-index: 1; }That tweak together with adding z-index to the Input.SelectedInBox state makes it behave as expected. So It seems like the core of this problem is down to z-index.
Versions