ebay-lightbox-dialog: ebay-combobox not correctly displayed when opened #521
Description
I verified there's no existing issue for this bug.
- There are no existing issues
Current behavior
When a combobox is rendered inside a lightbox dialog the dropdown is not fully visible when opened. The overflow property set in the main section of the lightbox prevents the dropdown from overflowing.
Expected behavior
I would expect the dropdown to overflow the modal container and render normally.
Package and version
latest
Device/OS/Browser info
No response
Steps to reproduce
Example story
export const WithCombobox: StoryFn<typeof EbayLightboxDialog> = (args) => {
const [open, setOpen] = useState(false);
const [selectedValue, setSelectedValue] = useState("");
const close = () => setOpen(false);
return (
<div>
<button className="btn btn--secondary" onClick={() => setOpen(!open)}>
Open Dialog with Combobox
</button>
<p>Some outside content...</p>
<EbayLightboxDialog
{...args}
open={open}
onOpen={() => action("onOpen")()}
onClose={() => {
action("onClose")();
close();
}}
a11yCloseText="Close"
>
<EbayDialogHeader>Select a Campaign</EbayDialogHeader>
<p>Choose a campaign from the dropdown below:</p>
<EbayCombobox
name="campaign"
floatingLabel="Campaign Name"
value={selectedValue}
onSelect={(event, data) => {
setSelectedValue(data.currentInputValue);
action("onSelect")(data);
}}
>
<EbayComboboxOption text="August Campaign" value="august" />
<EbayComboboxOption text="4th of July Sale (paused)" value="july4th" />
<EbayComboboxOption text="Basic Offer" value="basic" />
<EbayComboboxOption text="Basic Offer 1" value="basic1" />
<EbayComboboxOption text="Basic Offer 2" value="basic2" />
<EbayComboboxOption text="Holiday Special" value="holiday" />
<EbayComboboxOption text="Spring Collection" value="spring" />
</EbayCombobox>
{selectedValue && (
<p style={{ marginTop: "16px" }}>
<strong>Selected:</strong> {selectedValue}
</p>
)}
<EbayDialogFooter>
<EbayButton priority="primary" onClick={close}>
Confirm
</EbayButton>
<EbayButton onClick={close}>Cancel</EbayButton>
</EbayDialogFooter>
</EbayLightboxDialog>
</div>
);
};Relevant code block
No response
Additional context
