ic-ui-kit
ic-ui-kit copied to clipboard
IcSelect dropdown not visible in expanded accordion
When an IcSelect is placed inside an accordion that is by default expanded, the dropdown does not correctly go above the accordion and is therefore hidden. If you open and close the accordion this is rectified however on first click after reloading the page the dropdown will be hidden.
import { FC } from 'react';
import {
IcRadioGroup,
IcRadioOption,
IcButton,
IcAccordion,
IcTypography,
IcSelect,
} from '@ukic/react';
import '@ukic/fonts/dist/fonts.css';
import '@ukic/react/dist/core/core.css';
import '@ukic/react/dist/core/normalize.css';
const RadioButton: FC = () => {
const options = [
{ label: 'Espresso', value: 'espresso' },
{ label: 'Double Espresso', value: 'doubleespresso' },
{ label: 'Flat White', value: 'flatwhite' },
{ label: 'Cappuccino', value: 'cappuccino' },
{ label: 'Americano', value: 'americano' },
{ label: 'Mocha', value: 'mocha' },
];
return (
<>
<IcAccordion heading="English Breakfast" expanded>
<IcSelect
placeholder="Select an option..."
label="What is your favourite coffee?"
options={options}
onIcChange={(event) => console.log(event.detail.value)}
/>
</IcAccordion>
<IcAccordion heading="Earl Grey">
<IcTypography variant="body">
A tea blend that has been flavoured with oil of bergamot.
</IcTypography>
</IcAccordion>
</>
);
};
export default RadioButton;