ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard

IcSelect dropdown not visible in expanded accordion

Open MI6-613 opened this issue 1 year ago • 0 comments

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;

MI6-613 avatar Oct 08 '24 10:10 MI6-613