Setting Z-index of autocomplete dropdown, and using getOptionSelected

Question

I am implementing the Autocomplete material ui widget in my webApp, but the drop down is rendering behind my edit panel. I can use my arrow keys to select options, but I can't see the pop up. If I remove either of the following css property {position: "fixed"} or {"z-index": "2000"} it works, but my edit panel will no longer look correct. So it seems that I need to be able to set the zindex of the drop down to 2001 or some thing, but i am unsure as to how or if this is the best solution.

Also I am trying to set the initial value of the dropdown box to "ACCU-SEAL 35-532 Bag Sealer" but get the following error:

Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".

so I tried to add the following to my Autocomplete:

getOptionSelected={(option, value) => option.label === value}

but I get the same error.

I have an example of my code up here: https://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

Answer 1

You can use the disablePortal prop to make sure that the menu will be rendered under the current node:

<Autocomplete
    ....
    disablePortal
    ....
/>