search

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

[Bug]: Dropdown Items block is detached from the actual Dropdown (React) #1289

Closed pavel-goa closed 1 year ago

pavel-goa commented 1 year ago

Describe the bug

In some cases the dropdown items are detached from the dropdown. This happens on React side.

image

Provide Code

Not working:

  const handleReasonSelect = (_: string, value: string | string[]) => {
    setRejectReasonCode(value as string);
  };

...

<GoADropdown
  name={adjustmentItemId}
  value={rejectReasonCode}
  onChange={handleReasonSelect}
>
  {rejectReasons.map((reason) => (
    <GoADropdownItem
      key={reason.value}
      value={reason.value}
      label={reason.descriptionEnglish}
    />
  ))}
</GoADropdown>

Works as expected:

  const handleChange = (_, username) => {
    setSelectedAssessor(username);
  };

...

<GoAFormItem label={null}>
  <GoADropdown
    name="Service"
    value={[selectedAssessor]}
    placeholder="Assign To"
    onChange={(_, value) => handleChange(_, value)}
    multiselect={false}
    width="180px"
  >
    {assessors.map((assessor) => (
      <GoADropdownItem
        key={assessor.value}
        value={assessor.value}
        label={assessor.description}
      />
    ))}
  </GoADropdown>
</GoAFormItem>

To Reproduce

Not sure how to reproduce it

Relevant console log output

No response

What browsers are you seeing the problem on?

Chrome

Additional context

The working version is wrapped in GoAFormItem

mamadoutouregoa commented 1 year ago

We are experiencing the same issue with angular (angular 14) angular_dropdown_issue

tzuge commented 1 year ago

:tada: This issue has been resolved in version 4.0.0-alpha.175 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 1.0.0-alpha.212 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

mamadoutouregoa commented 1 year ago

@chrisolsen and @tzuge Does this 1.0.0-alpha.212 version fix also the angular part ? I know that this bug was originally discovered in React, but we had it also in angular as per my comment above (see attached screeshot)

tzuge commented 1 year ago

:tada: This issue has been resolved in version 2.4.0-alpha.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 4.13.0-alpha.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 1.5.0-alpha.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 1.13.0-alpha.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

mamadoutouregoa commented 1 year ago

@tzuge I installed 1.13.0-alpha.1, but still the same issue

tzuge commented 1 year ago

:tada: This issue has been resolved in version 2.4.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 4.13.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 1.13.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 year ago

:tada: This issue has been resolved in version 1.5.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: