Dropdown: Custom option shows only after reselected with reactive forms

[gabrieledaugenaite]

Custom option/button templates for dropdown show up only after value is reselected with reactive forms

Bug already reported?

• [X] I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

Angular

Component name

dropdown

Description

There seems to be issues to display custom option/button templates when using reactive form control. Dropdown options structure can be as simple as an array of objects with label and value, however the actual templates won't be displayed until value is selected/reselected. You can see both cases below

When initial value is not provided (before making a selection) - custom option template is not visible

When initial value is not provided (after making a selection) - custom option template becomes visible

When initial value is provided (before reselecting value) - custom button (selected value) template is not visible

When initial value is provided (after reselecting value) - custom button (selected value) template becomes not visible

Steps To Reproduce

No response

Current Behaviour

When custom option/button template is provided while using a reactive form approach, the default option is being shown initially and custom option/button template becomes visible after selecting/reselecting dropdown value

Expected Behaviour

Custom option/button template should be shown from the start if provided while using a reactive form approach

[splashdust]

@gabrieledaugenaite A similar issue was fixed recently, in 3.1.0. It could be something else in your case, but I just want to confirm that you are experiencing the issue on the latest released version?

[gabrieledaugenaite]

@splashdust yes, the screenshots above are from running angular storybook locally with latest code.

below are the changes I've done for FormControlWithResetTemplate in dropdown.stories.ts file in angular lib to reproduce the issue

const options$ = of([
    {
      label: 'Sweden',
      value: 'sweden'
    },
    {
      label: 'Australia',
      value: 'australia'
    },
  ])

<ng-template nggDropdownButton let-option="option">
  <div>
    <div>{{ option.label }} (selected)</div>
  </div>
</ng-template>
<ng-template nggDropdownOption let-option="option" let-index="index">
  <div>
    <div>{{ index }}. {{ option.label } </div>
  </div>
</ng-template>

though now I noticed that keeping pipe(delay(3000)) (or even pipe(delay(0))) removes the issue completely. but is it an expected behavior?

[splashdust]

I see! No, I don't think that is an expected behavior. Definitely sounds like a bug! Probably some kind of Angular change detection quirk.