Autocomplete with google keyboard

[Amit]

Hi,

In our ng6 application (reactive forms) we are having issues with the autocomplete control in certain android devices.

The code works on iphones, in desktop Chrome and Firefox-  please note that

                                <kendo-autocomplete class="form-control form-control-sm" placeholder="Default Matrix"
                                    [data]="matrixTypes" [valueField]="'description'" formControlName="matrix"></kendo-autocomplete>

The specific issue is that on android devices with the google keyboard, the list is not displayed when the user types any letter e.g. a, g,t,f,d, etc - it only comes up when the user clicks the space key or the dash key. This is counter intuitive since the users expect to type in letters to get the selections list to appear.

Based on the needs of the UI showing the list open as default by setting  [suggest]="true" is not an option.

Is there a way I can leverage the focus event to then force the control to open by invoking toggle. The trick seems to be - in reactive forms - to determine which auto-complete to open. The [data]="matrixTypes" -> matrix types is an array.

Thanks,

Amit

[Amit]

Hello,

Alternatively, would it be possible to get the reactive forms version of the code in the suggestions section - https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/suggestions/#toc-controlling-the-list-with-suggestions.

@ViewChild("autocomplete") public autocomplete: any; // In lieu of viewchild would use the formControlName directive in the template

setTimeout(() => { if(!this.autocomplete.wrapper.contains(document.activeElement)) { this.autocomplete.toggle(false); } });

The reason for the ask is that I am trying to access the toggle method in the code and what I am trying does not work -

let acControl: any = <AutoCompleteComponent>(
(<any>this.singleSampleForm.get("collectionTimezone"))
); // as AutoCompleteComponent;
// )) as AutoCompleteComponent;

Thanks,

Amit

 

[Svet]

Hi Amit,

I tried to reproduce the reported undesired behavior, but I could not.

Could you provide some more details about it, so that we can reproduce it. Also which android versions are affected. A sample isolated example would be best.

Indeed, we can handle the (focus) event and call the toggle method of the current AutoComplete in order to open it manually as demonstrated in the following example:

https://stackblitz.com/edit/angular-lqrkvr?file=app/app.component.ts

I hope this helps. Let us know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Amit]

Hi Svetlin,

Thank you for getting back to me. Indeed, this is a tricky one to replicate - its more google keyboard specific, it works with swiftkey and other android keyboards - one of the testers sent me a video but can't attach that and still images don't explain it at all.

Thanks for the sample you sent - however I am looking for the one that uses reactive forms. This stackblitz uses template forms.

In reactive forms when I instantiate the code in the model <any>this.formname.get("controlname") as AutoCompleteComponent the object created is of type AbstractControl.

Thanks and regards,

Amit

[Svet]

Hi Amit,

I updated the example, so that it uses reactive forms, where the AutoComplete is bound to a formControl:

https://stackblitz.com/edit/angular-lqrkvr-vylqix?file=app%2Fapp.component.ts

The functionality seems to be as expected. Could you adjust the provided example, so that we are able to observe the reported undesired behavior and provide further assistance for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Amit]

Hi Svetlin,

Thank you for the reactive forms example.

Recreate steps - this behavior occurs only in

1.  Android mobile devices 

2. using the default google keyboard

It works fine with other keyboards e.g  the swiftkey keyboard. If you view the autocomplete sample page in the two conditions defined above you should be able to observe this.

My next challenge is to now implement this on a reactive form with formarrays.

Regards,

Amit

 

[Svet]

Hi Amit,

Thank you for the additional details.

Indeed, this is a bug on our side. I logged a new issue in our public GitHub repository, that can be tracked at the following link:
https://github.com/telerik/kendo-angular/issues/1914

Please accept our apologies until the issue is resolved. We will try to fix it as soon as possible. I have also updated your account's Telerik points for raising this issue to our attention.

You can check some of the online available resources on using Angular's FormArray like the following:

https://angular.io/api/forms/FormArray

https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Amit]

Hi Svetlin,

Thanks so  much - I'm looking forward to the resolution for this. Really appreciate all your help with this.

Regards,

Amit