Skip to content

fix(cdk/listbox): error with multiple preselected values #25621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 11, 2022

Conversation

crisbeto
Copy link
Member

The CDK listbox had a subscription to its model changes in the constructor which fires immediately due to the startsWith and which was attempting to sort the selected values when in multiple selection mode. The problem is that the options aren't available until ngAfterContentInit which was causing an error when we tried to do the sorting.

These changes move the change event subscription to ngAfterContentInit so that options are guaranteed to be defined when it fires.

Fixes #25611.

The CDK listbox had a subscription to its model changes in the constructor which fires immediately due to the `startsWith` and which was attempting to sort the selected values when in multiple selection mode. The problem is that the options aren't available until `ngAfterContentInit` which was causing an error when we tried to do the sorting.

These changes move the change event subscription to `ngAfterContentInit` so that options are guaranteed to be defined when it fires.

Fixes angular#25611.
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release labels Sep 10, 2022
@crisbeto crisbeto requested a review from mmalerba September 10, 2022 07:05

it('should respect user given tabindex for focusable elements', async () => {
it('should respect user given tabindex for focusable elements', waitForAsync(async () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added waitForAsync to all of these tests, because any errors during the test weren't being picked up by Jasmine. This threw me off for a while since I could see that an error was being thrown, but my test wasn't failing.

Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Sep 10, 2022
@crisbeto crisbeto merged commit 1b0265c into angular:main Sep 11, 2022
crisbeto added a commit that referenced this pull request Sep 11, 2022
The CDK listbox had a subscription to its model changes in the constructor which fires immediately due to the `startsWith` and which was attempting to sort the selected values when in multiple selection mode. The problem is that the options aren't available until `ngAfterContentInit` which was causing an error when we tried to do the sorting.

These changes move the change event subscription to `ngAfterContentInit` so that options are guaranteed to be defined when it fires.

Fixes #25611.

(cherry picked from commit 1b0265c)
forsti0506 pushed a commit to forsti0506/components that referenced this pull request Sep 16, 2022
The CDK listbox had a subscription to its model changes in the constructor which fires immediately due to the `startsWith` and which was attempting to sort the selected values when in multiple selection mode. The problem is that the options aren't available until `ngAfterContentInit` which was causing an error when we tried to do the sorting.

These changes move the change event subscription to `ngAfterContentInit` so that options are guaranteed to be defined when it fires.

Fixes angular#25611.
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Sep 22, 2022
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`14.2.1` -> `14.2.2`](https://renovatebot.com/diffs/npm/@angular%2fcdk/14.2.1/14.2.2) |
| [@angular/material](https://github.com/angular/components) | dependencies | patch | [`14.2.1` -> `14.2.2`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/14.2.1/14.2.2) |

---

### Release Notes

<details>
<summary>angular/components</summary>

### [`v14.2.2`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1422-cytoplasm-salmon-2022-09-14)

[Compare Source](angular/components@14.2.1...14.2.2)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [6275f9d41f](angular/components@6275f9d) | fix | **a11y:** account for Windows 11 high contrast themes in detector ([#&#8203;25624](angular/components#25624)) |
| [eb5f79bb7b](angular/components@eb5f79b) | fix | **listbox:** error with multiple preselected values ([#&#8203;25621](angular/components#25621)) |
| [65af24ee53](angular/components@65af24e) | fix | **menu:** don't prevent default enter and space actions ([#&#8203;25591](angular/components#25591)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [b3e35f3be4](angular/components@b3e35f3) | fix | **datepicker:** restore focus after closing animation ([#&#8203;25567](angular/components#25567)) |

#### Special Thanks

Kristiyan Kostadinov and Paul Gschwendtner

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4xOTUuMyIsInVwZGF0ZWRJblZlciI6IjMyLjE5Ni4wIn0=-->

Co-authored-by: cabr2-bot <[email protected]>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1547
Reviewed-by: Epsilon_02 <[email protected]>
Co-authored-by: Calciumdibromid Bot <[email protected]>
Co-committed-by: Calciumdibromid Bot <[email protected]>
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 12, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(Overlay / Listbox): Error thrown when a listbox with cdkListboxMultiple is rendered inside an overlay
2 participants