Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Closed
1 task
baggsie opened this issue Sep 9, 2022 · 1 comment · Fixed by #25621
Closed
1 task

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

baggsie opened this issue Sep 9, 2022 · 1 comment · Fixed by #25621
Assignees
@crisbeto
Labels
area: cdk/listbox P2 The issue is important to a large percentage of users, with a workaround

Comments

@baggsie
Copy link

baggsie commented Sep 9, 2022

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When a listbox component is used inside an overlay, an error is thrown if the listbox contains multiple selected options

Reproduction

https://stackblitz.com/edit/angular-ivy-cgbcrq?file=src/app/dropdown.component.ts

Steps to reproduce:

  1. Open the console
  2. Click 'toggle' to open the overlay then select 'Alpha'
  3. Click 'toggle' to close the overlay
  4. Click 'toggle' to open the overlay, then select 'Bravo'
  5. Click 'toggle' to close the overlay
  6. Click 'toggle' to open the overlay
  7. Observe error in the console

Expected Behavior

The list should render without error

Actual Behavior

The following error is displayed in the console :

image

Environment

  • Angular:14
  • CDK/Material: 14.2.1
  • Browser(s): Chrome and Safari
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
@baggsie baggsie added the needs triage This issue needs to be triaged by the team label Sep 9, 2022
@crisbeto crisbeto self-assigned this Sep 10, 2022
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround has pr area: cdk/listbox and removed needs triage This issue needs to be triaged by the team labels Sep 10, 2022
crisbeto added a commit to crisbeto/material2 that referenced this issue Sep 10, 2022
@crisbeto
fix(cdk/listbox): error with multiple preselected values
29d5712 
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 mentioned this issue Sep 10, 2022
Merged
crisbeto added a commit that referenced this issue Sep 11, 2022
@crisbeto
fix(cdk/listbox): error with multiple preselected values (#25621)
1b0265c 
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.
crisbeto added a commit that referenced this issue Sep 11, 2022
@crisbeto
fix(cdk/listbox): error with multiple preselected values (#25621)
eb5f79b 
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 issue Sep 16, 2022
@crisbeto
fix(cdk/listbox): error with multiple preselected values (angular#25621)
ead7376 
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.
@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.
Assignees

@crisbeto crisbeto

Labels
area: cdk/listbox P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/listbox): error with multiple preselected values crisbeto/material2
2 participants
@crisbeto @baggsie