GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
16 stars 25 forks source link

Dropdown: Won't open inside accordion or details (Firefox) #2078

Open lizhuomeng71 opened 3 months ago

lizhuomeng71 commented 3 months ago

Describe the bug

Dropdown component won't open when inside Accordion or Details component. This is only happening in the Firefox browser. This is likely related to #2077 .

Provide Code

For Accordion

<goa-accordion heading="Heading" headingsize="medium"  id="accordion">
  <h2>
    Accordion One
  </h2>
  <goa-dropdown value="" id="accordion-dropdown">
    <goa-dropdown-item value="red" label="Red"></goa-dropdown-item>
    <goa-dropdown-item value="green" label="Green"></goa-dropdown-item>
    <goa-dropdown-item value="blue" label="Blue"></goa-dropdown-item>
  </goa-dropdown>

  <goa-form-item label="Basic" id="accordion-input">
    <goa-input name="item"></goa-input>
  </goa-form-item>
</goa-accordion>

For Details

<goa-details heading="Detail Heading"  id="details">
  <h2>
    details One
  </h2>
  <goa-dropdown value="" id="details-dropdown">
    <goa-dropdown-item value="red" label="Red"></goa-dropdown-item>
    <goa-dropdown-item value="green" label="Green"></goa-dropdown-item>
    <goa-dropdown-item value="blue" label="Blue"></goa-dropdown-item>
  </goa-dropdown>

  <goa-form-item label="Basic" id="details-input">
    <goa-input name="item"></goa-input>
  </goa-form-item>
</goa-details>

To Reproduce

  1. Use the provided code above,
  2. Click to open the accordion or details,
  3. Click on dropdown

Expected:

Dropdown should open

Actual:

Dropdown does not open

ArakTaiRoth commented 3 months ago

@lizhuomeng71 I can't reproduce this issue, and there's no code in this story used to reproduce.

syedszeeshan commented 1 month ago

I used the code provided in the story, and apparently works fine in firefox.

Firefox browser version: 131.0.2 (64-bit)

https://github.com/user-attachments/assets/18fcb7e0-c8c0-46d8-aa60-f5fc86ce16bd

lizhuomeng71 commented 1 month ago

closed as no longer reproducible