p-dropdown [group]=true not set default value

[leonetosoft]

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

I am performing a simple record of occurrence,
When I use the update option I load the form values from the database, like this: (ignore the rest of the missing code)
`this.ocorrenciaService.Load(id).subscribe(rs => {

  const procedimentos = [];
  rs.data.procedimentos.forEach(pro => {
    procedimentos.push(pro.id);
  });

  this.form.patchValue({
    id: rs.data.id,
    nome_paciente: rs.data.nome_paciente,
    quarto: rs.data.quarto,
    data_ocorrencia: moment(rs.data.data_ocorrencia).toDate(),
    medico_id: rs.data.medico_id,
    duracao: rs.data.duracao,
    entrada: moment(rs.data.entrada, 'HH:mm:ss').toDate(),
    saida: moment(rs.data.saida, 'HH:mm:ss').toDate(),
    obs: rs.data.obs,
    procedimentos: procedimentos,
    local: rs.data.status === OCORRENCIA_STATUS.ESPERA ?
      0 : rs.data.status === OCORRENCIA_STATUS.QUARTO ?
        -1 : rs.data.status === OCORRENCIA_STATUS.CANCELADA ? -2 : rs.data.sala_id
  });

  this.carregando = false;
}, err => {
  this.carregando = false;
});`

Note that I have a variable called "loading" to indicate that the form has been fully loaded, and making the elements visible on the screen.
my formControll is initialized this way: (ignore the rest of the missing code)
this.form = fb.group({ 'id': [null], 'nome_paciente': [null, Validators.required], 'quarto': [null], 'data_ocorrencia': [null, Validators.required], 'medico_id': [null], 'procedimentos': [null], 'duracao': [null], 'entrada': [null], 'saida': [null], 'obs': [null], 'local': [null, Validators.required] });

Here is the layout of my dropdown: (ignore the rest of the missing code)

<div class="ui-g-12 ui-md-4 ui-lg-4"> {{form.controls['local'].value}} <span>Local (<span style="color: red">*</span>):</span> <p-dropdown *ngIf="!carregando" [options]="local" [style]="{'width':'100%'}" [formControlName]="local" placeholder="Selecione o local" [group]="true"></p-dropdown> <p-message *ngIf="isFieldValid('local')" severity="error" text="Campo obrigatório"></p-message> </div>

the problem is that using the group the dropdown does not get the value I preloaded, other dropdown works correctly and initializes the value correctly ...

Please tell us about your environment: Ubuntu

• Angular version: 5.0.0
• PrimeNG version: 5.2.0
• **Browser:**Chrome 61.0.3163.100 (Versão oficial) 64 bits
• Language: TypeScript X.X
• Node (for AoT issues): 6.12.3

[at-vinguyen]

Yeap, I have a similar issue with my project when applying the group option to p-dropdown. It's easy to find. I appreciate your product and hope so this issue will be resolved soon. Thank you.

• My environment:
  Angular version: 5.0.0
  PrimeNG version: 5.2.0

[ghost]

I'm having a similar issue with my project using form groups. The group dropdown doesn't update the text on the dropdown unless it is specifically changed within the dropdown. Other non-group dropdowns on the page work just fine. I tried switching to ngModel and had the same issue. I'm on 5.2.0.

I've tried multiple workarounds including changing my value objects to strings (same result) and sorting the dropdown to have the initial value at the top and using "autoDisplayFirst" but this just displays the label for the group it is a part of.

For a workaround I simply changed the placeholder to the display of the initial value if one exists as the value is already stored, just not displayed. In no ways optimal, but this works for now. Hope this is fixed soon, thanks for the great library!

[jakob-bebop]

I'm having the same problem. This fix works for my use case: #5171

[izll]

Same problem here...

[joelbinn]

From what I can see the problem lies in the recursive call in the findOption()-method at dropdown.ts:633. It checks the this.group-property value but does not take into account that it has recursed into the items of a group. A proposed solution could be to provide an optional parameter, inGroup to the method which is set at the recursive call when finding the option among the items of a group.

findOption(val: any, opts: any[], inGroup?: boolean): SelectItem {
-->     if(this.group && !inGroup) {
            let opt: SelectItem;
            if(opts && opts.length) {
                for(let optgroup of opts) {
-->                 opt = this.findOption(val, optgroup.items, true);
                    if(opt) {
                        break;
                    }
                }
            }
            return opt;
        }
        else {
            let index: number = this.findOptionIndex(val, opts);
            return (index != -1) ? opts[index] : null;
        }
    }

Best regards and thanks for a great lib.

[nox-404]

Hi,
I got the same problem, as a workaround I used the [placeholder]="model.value" thing. (same as @MarcGarland suggested)
@joelbinn Can you make a PR to fix this ?

(I just noticed that fix #5171, did it work ?)

[cagataycivici]

Let's check this out for 5.2.1 then.

[cagataycivici]

I like the solution of @joelbinn and committed it, thank you guys.