Cannot type space in RadAutoCompleteTextView in Angular app running on Android

[IRCraziestTaxi]

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Did you verify this is a real problem by searching the NativeScript Forum?

Yes

Tell us about the problem

Cannot type space in RadAutoCompleteTextView in Angular app running on Android

Which platform(s) does your issue occur on?

Android (platform version 4.2.1)

Please provide the following version numbers that your issue occurs with:

• **Progress NativeScript UI version: (do not see it in package.json)
• **CLI: 4.2.1
• **Cross-platform modules: ^4.2.0
• **Runtime(s): tns-android: 4.2.0

Please tell us how to recreate the issue in as much detail as possible.

1. Register RadAutoCompleteTextView element in file with Angular component
2. Include element in template
3. Run the app (tns run android)
4. Type some letters followed by a space (space is not inserted)
5. Space is not applied in text box
6. Notice also that a space is allowed if no other characters have been typed, but typing another space clears out the text box

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

import { RadAutoCompleteTextView } from "nativescript-ui-autocomplete";
// And other stuff

registerElement("RadAutoCompleteTextView", () => RadAutoCompleteTextView);

@Component({
    // ...
})
export class MyComponent implements OnInit {
    @ViewChild("autocompleteSearch")
    private readonly _search: ElementRef<RadAutoCompleteTextView>;

    // ...

    public ngOnInit(): void {
        this._search.nativeElement.loadSuggestionsAsync = (search: string) => {
            // I can also replace this with a simple promise that logs the search string
            // and returns an empty array; nothing changes.
            return this.searchPlaces(search);
        };
    }

    // ...
}

[tsonevn]

Hi @IRCraziestTaxi, I have tested the described scenario with the nativescript-ui-samples-angular app, however, was unable to recreate an issue with typing spaces in the RadAutoCompleteTextView component.

Can you provide sample project, where the issue can be reproduced?

[IRCraziestTaxi]

Sorry, I have been pretty busy and was just now able to copy over the project with all but pertinent code included and ensure that the copied project reproduces the error.

Repo is here:

https://github.com/IRCraziestTaxi/nativescript-ui-autocomplete-google-places

If it helps, I am running the project on an LG V20 running Android 8.0.0.

[IRCraziestTaxi]

Is this being investigated? If not, when will somebody be able to get around to looking at it?

[tsonevn]

Hi @IRCraziestTaxi, Excuse me for the delay in reply. I reviewed your project. First of all, I noticed that you are using registerElement to register the RadAutoCompleteTextView component in the NS Angular project. This is not needed, you can import directly the module provided by nativescript-ui-autocompleteplugin. Checkout the example here.

Regarding the Cannot type space in RadAutoCompleteTextView issue. I have checked the project and was able to recreate the issue. I will mark it as a bug, and we will investigate further the case. As a workaround, I would suggest using displayMode -> Plain, which will allow you are using space while entering the text in the field. For Example:

<RadAutoCompleteTextView #locationSearch
            completionMode="Contains"
            displayMode="Plain"
            suggestMode="Suggest"
            [items]="dataItems"
            (tokenSelected)="onSuggestionSelect($event)"
        >
        <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
            <ng-template tkSuggestionItemTemplate let-item="item">
                <StackLayout orientation="vertical" padding="10">
                    <Label [text]="item.text"></Label>
                </StackLayout>
            </ng-template>
        </SuggestionView>
    </RadAutoCompleteTextView>

..............................
import { RadAutoCompleteTextView, TokenModel } from "nativescript-ui-autocomplete";
import { RadAutoCompleteTextViewComponent } from "nativescript-ui-autocomplete/angular";
..............................
// registerElement("RadAutoCompleteTextView", () => RadAutoCompleteTextView);

@Component({
    selector: "ns-location-browse",
    moduleId: module.id,
    templateUrl: "./location-browse.component.html",
    providers: [GooglePlacesService]
})
export class LocationBrowseComponent implements OnInit {
    @ViewChild("locationMap")
    private readonly _map: ElementRef<MapView>;
    @ViewChild("locationSearch") _search: RadAutoCompleteTextViewComponent;
 ..........................
    public ngOnInit(): void {
        this._search.autoCompleteTextView.loadSuggestionsAsync = (search: string) => {
            // return this.searchLocations(search);
            return new Promise<any[]>((resolve: (val: any[]) => void) => {
                resolve([]);
            });
        };
    }
    get dataItems(): ObservableArray<TokenModel> {
        return this._items;
    }
    .....................
}

[tsonevn]

Hi @IRCraziestTaxi, We investigated further your case and found that you have written suggest with a lowercase first letter, which is an invalid value for the suggestMode property. In this scenario the RadAutoCompleteTextView will set its default value (SuggestAppend). To solve the issue in your project, you should set up the suggesttMode as follow ->suggestMode="Suggest".

[IRCraziestTaxi]

@tsonevn Thank you for the reply. I will change suggest to Suggest as suggested. However, I will say that, even using the default SuggestAppend, I do not feel like being unable to type a space should be acceptable behavior.

Edit: After thinking about it for a couple of minutes, the space would probably not be an issue even with SuggestAppend if my autocomplete were able to display tokens properly, but I cannot verify. Hopefully this issue will get resolved soon. :/