dropdownlist, select item by keyboard not change ngmodel

[silvano.aldaParticipant]

Hi,
I ‘m having an issue, when I select an item inside dropdownlist using only keyboard, not using mouse click, the selected value is not reflected on ngmodel

It this a bug? There are any solutions/workaround?

Thanks!

[StanislavParticipant]

Hello silvano.alda,

Can you please send us an example?
I did some tests and everything worked fine.

Are you using the latest version of jqwidgets?

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[silvano.aldaParticipant]

Hi Stanislav,
thank for your very fast reply!

this is an example from your site: https://www.jqwidgets.com/angular/angular-dropdownlist/angular-dropdownlist-twowaydatabinding.htm

if you select item using only keyboard the selected value is not reflected

[silvano.aldaParticipant]

It only if you hit “return” after selection, if you click outside, or hit “tab”, for example to switch to the next element to compile… it is not working

[StanislavParticipant]

Hello silvano.alda,

Here is an example:

app.component.html

<fieldset style="width: 200px; margin-top:1em; margin-bottom: 1em; border: 1px solid lightgrey;">
    The value is {{ value | json }}
</fieldset>

<jqxDropDownList [(ngModel)]="value" (onSelect)="Select($event)"
                 [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
</jqxDropDownList>

app.component.ts

import { Component, DoCheck } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    value: string;

    Select(event: any): void {
        let myValue = event.args.item.value;

        this.value = myValue;
    }

    source: string[] =
    [
        "Affogato",
        "Americano",
        "Bicerin",
        "Breve",
        "Cafe Bombon",
        "Cafe au lait",
        "Caffe Corretto"
    ];  
}

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[silvano.aldaParticipant]

Thank you Stanislav,
This behaviour Isn’t it a bug/issue? Are you planning to solve it with the next release?

My problem is that i have many dropdownlist, inside ngfor, so there is impossible to set manually ngmodel on select event.

I can call onselect method on each but without know the ngmodel name

There is any workaround to do that without hard coding “this.value” inside select function?

like for example

Select(event: any): void {
   event.owner.host.some_native_method_to_call_that_reflect_value_on_owned_ngmodel()
 
}

thanks!

[StanislavParticipant]

Hello silvano.alda,

If you need this functionality you should contact our sales department.
Two-way Data Binding is constructed like this, and if we change how it selects the items, it will reflect on a lot of other people as well.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[ngParticipant]

Dear JqWidgets Team

Why we can’t use the Angular Forms API correctly with your controls. It makes no sense.

Thank you

Regards

[Author]

Posts