Elastic UI ComboBox dropdown positioning

[DarioBuljovcic]

Drop down from the combo box when its on the bottom of the page shrinks upwards instead of downwards

Environment and versions

• EUI version: 95.3.0
• React version: 18.3.1
• Browser: chrome

Here is the combo box

<EuiComboBox
            aria-label="Accessible screen reader label"
            placeholder="Izaberite razrede"
            isInvalid={errorList.classList}
            options={classList}
            selectedOptions={selectedClasses}
            onChange={onChange}
            data-test-subj="demoComboBox"
            isClearable={true}
            
          />

Here is a picture of how it looks.

Top style of the selected div doesnt change

[tkajtoch]

Hi @DarioBuljovcic! Thanks for reporting this behavior. Could you share a reproducible example in CodeSandbox? I'm not sure if I understand your whole setup. Thanks!

[DarioBuljovcic]

Hi, I'm sorry but I don't think i can reproduce it. When i put my code into the sandbox it works how it should. I will try to test out more to see if i find what is the problem.

It's top value doesn't change when the number of items changes. So for example i have 10 items and i search so that only two items remain, the items box top value doesn't push it down but only it's height changes and it just stays floating up

It's like it doesn't know that it's on top of the combobox and not on the bottom

[DarioBuljovcic]

Here is another example of how it looks.
It works in sandbox but in my app it doesn't.

I copied the code from https://eui.elastic.co/#/forms/combo-box example number 4.

[JasonStoltz]

Hey @DarioBuljovcic. My assumption if it can't be reproduced in a Codesandbox is that it is something your project setup. I don't have any ideas of what the problem is. Unfortunately, without something reproducible, we won't be able to help you debug it.

[tkajtoch]

I'm closing this as it's related to @DarioBuljovcic setup and isn't an actual EUI bug. Please feel free to open a new issue if you believe this is incorrect, providing reproduction steps and a CodeSandbox example.