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.

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

p-dropdown unable to auto-select first item if group used #12637

Closed
contra1337 opened this issue Feb 15, 2023 · 0 comments
Closed

p-dropdown unable to auto-select first item if group used #12637

contra1337 opened this issue Feb 15, 2023 · 0 comments
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@contra1337
Copy link

contra1337 commented Feb 15, 2023

Describe the bug

When using p-dropdown with a grouped data set, inside of a reactive form, where autoDisplayFirst is true / omit, and optionGroupChildren is not the default value of 'items', the following error is logged in the browser console and no default item is selected:

core.mjs:8506 ERROR TypeError: Cannot read properties of undefined (reading '0') at Dropdown.updateSelectedOption (primeng-dropdown.mjs:355:69) at Dropdown.ngOnInit (primeng-dropdown.mjs:215:14) at callHook (core.mjs:2488:22) at callHooks (core.mjs:2457:17) at executeInitAndCheckHooks (core.mjs:2408:9) at refreshView (core.mjs:10434:21) at refreshEmbeddedViews (core.mjs:11434:17) at refreshView (core.mjs:10443:9) at refreshEmbeddedViews (core.mjs:11434:17) at refreshView (core.mjs:10443:9) core.mjs:8506 ERROR TypeError: Cannot read properties of undefined (reading '0') at Dropdown.updateSelectedOption (primeng-dropdown.mjs:355:69) at Dropdown.writeValue (primeng-dropdown.mjs:340:14) at setUpControl (forms.mjs:2941:23) at FormGroupDirective.addControl (forms.mjs:4745:9) at FormControlName._setUpControl (forms.mjs:5295:43) at FormControlName.ngOnChanges (forms.mjs:5240:18) at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1574:14) at callHook (core.mjs:2498:18) at callHooks (core.mjs:2457:17) at executeInitAndCheckHooks (core.mjs:2408:9)

it looks like the reason is the wrong property is accessed in this one spot in

this.selectedOption = this.optionsToDisplay[0].items[0];

all areas appear to use getOptionGroupChildren() to get the defined field except this one area is still hard coded to 'items'

I'm happy to provide a PR sometime later today to address if the issue can be confirmed. Stack blitz attached, changing the data from children -> items works but should not be required

Environment

MacOS 12.0.1
Chrome 109

Reproducer

https://stackblitz.com/edit/github-ixgaz2?file=src%2Fapp%2Fapp.component.html

Angular version

15.1.0

PrimeNG version

15.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.10.0

Browser(s)

Chrome 109

Steps to reproduce the behavior

  1. create a simple form control or form group
  2. create an options array with groups where the children property is not called 'items' but something like 'children'
  3. create a p-dropdown and bind the options
  4. set [group]="true"
  5. set optionGroupChildren to the children field (again not called items)
  6. set the optionGroupLabel and optionLabel if needed
  7. bind the formControlName to the same one created in step 1
  8. open the dropdown in the browser and see the error

Expected behavior

No error should be logged when the component is using a default value for autoDisplayFirst and group=true and data does not use field items as the child property

The first selectable option within the first group should be selected probably, as works when it is called items

@contra1337 contra1337 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 15, 2023
@contra1337 contra1337 changed the title p-dropdown unable to select first item if group used p-dropdown unable to auto-select first item if group used Feb 15, 2023
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jun 17, 2023
@cetincakiroglu cetincakiroglu added this to the 16.0.2 milestone Jun 17, 2023
cetincakiroglu added a commit that referenced this issue Jun 21, 2023
resolves #12637 -- uses proper group children property in dropdown autoselect
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants