vertically aligned combobox overlaps with each other

[angie-hui]

🐛 Bug Report

When multiple combobox are vertically displayed, the menu items of the previous combobox is hidden under the input field of the combobox below.

To Reproduce

Steps to reproduce the behavior:

1. Have 2 combobox vertically stacked on top of each other
2. Open options menu of top combobox

Expected Behavior

Menu items should be visible and not hidden under input field of the next combobox

Actual Results

Menu items are hidden behind input field of the next combobox

Browser (if applicable)

Chrome

If this was a visual bug, what browser did you spot it on?

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/overlapping-combo-box-4bpo8y?file=/src/App.js

Error Output

Paste the error output here

or

Include a screenshot of a visual bug

[NicholasBoll]

This looks like it might need an update to the z-index of the input:

https://github.com/Workday/canvas-kit/blob/68149ddc8281902473e2ce9e9451de2b592765ac/modules/labs-react/combobox/lib/Combobox.tsx#L418

    let cssOverride: CSSObject = {':focus': {zIndex: 2}};

Only change the z-index if the input is focused.

[NicholasBoll]

Here's a codesandbox of this workaround working: https://codesandbox.io/s/0edf2x

[angie-hui]

I've tried the workaround and it works. Did you want me to close the issue?