Nativescript-ui-feedback: Android: Soft keyboard gets hidden when autocomplete gets focus.

[nmongiya]

Android: Soft keyboard gets hidden when autocomplete gets focus.
I have a form in which there are 2 TextField(keyboardType="number") and a RadAutoCompleteTextView. When user press 'Next' from first TextField 2nd Field gets focus and after pressing 'Next' here RadAutoCompleteTextView gets the focus but soft keyboard disappears. User needs to click again to get the keyboard back.
"tns-ios": { "version": "3.4.1" },
"dependencies": { "@angular/animations": "~5.1.0", "@angular/common": "~5.1.0", "@angular/compiler": "~5.1.0", "@angular/core": "~5.1.0", "@angular/forms": "~5.1.0", "@angular/http": "~5.1.0", "@angular/platform-browser": "~5.1.0", "@angular/platform-browser-dynamic": "~5.1.0", "@angular/router": "~5.1.0", "nativescript-advanced-webview": "^1.2.0", "nativescript-angular": "~5.1.0", "nativescript-camera": "^3.2.1", "nativescript-drawingpad": "^2.1.1", "nativescript-geolocation": "^4.2.2", "nativescript-google-maps-sdk": "^2.4.3", "nativescript-loading-indicator": "^2.4.0", "nativescript-pro-ui": "^3.3.0", "nativescript-theme-core": "~1.0.4", "reflect-metadata": "~0.1.8", "rxjs": "~5.5.2", "tns-core-modules": "~3.4.0", "zone.js": "~0.8.18" },

[nmongiya]

I tried the following on click of return from the previous TextField
var autocomp:RadAutoCompleteTextView =<RadAutoCompleteTextView> this.page.getViewById("autocompleteComp"); utils.ad.showSoftInput(autocomp);
but that is also not opening the keyboard, user need to tab the autocompleteTextbox

[tsonevn]

Hi @nmongiya ,
Thank you for reporting this issue.
Indeed the Autocomplete will not be focused after pressing the Keyboard next button.
In the meantime, you could try on returPress event to focus the component and then to open the Input. For example:
XML

<StackLayout ios:backgroundColor="#CDCECE" padding="5">
    <Label text="Select country"/>
    <TextField hint="test" text="{{  }}" />
    <TextField hint="test2" returnPress="ontap" text="{{  }}" />

        <au:RadAutoCompleteTextView id="autocmp" items="{{ dataItems }}" suggestMode="Suggest" displayMode="Tokens">
            <au:RadAutoCompleteTextView.suggestionView>
                <au:SuggestionView>
                    <au:SuggestionView.suggestionItemTemplate>
                        <StackLayout orientation="vertical" padding="10">
                            <Label text="{{ text }}"></Label>
                        </StackLayout>
                    </au:SuggestionView.suggestionItemTemplate>
                </au:SuggestionView>
            </au:RadAutoCompleteTextView.suggestionView>
         </au:RadAutoCompleteTextView>


    </StackLayout>

TypeScript

import { RadAutoCompleteTextView } from "nativescript-pro-ui/autocomplete";
import * as utils from "utils/utils"
export function onPageLoaded(args){
    var page = args.object;

    page.bindingContext = new viewModel.ViewModel(args);
}

export function ontap(args){
var page = args.object.page;
var autocomp =<RadAutoCompleteTextView>page.getViewById("autocmp"); 
setTimeout(() => {
    autocomp.focus();
    utils.ad.showSoftInput(autocomp.nativeView);
}, 100);

}

[nmongiya]

Thanks for your suggestion @tsonevn . I tried your code to open the soft keyboard after settimout, it is indeed opens the keyboard but that does not seem to activated. There is no blinking cursor on autocomp and user need to press atleast one key in the keyboard to activate it. Once the use presses any key, cursor starts blinking on autocmp and it behaves normally.

[jahngergely]

I've found a workaround (tested both on emulator and on device)
HTML:

<RadAutoCompleteTextView #autocomp [items]="dataItems" suggestMode="Suggest" 
    displayMode="Token" completionMode="StartsWith" layoutMode="Horizontal" 
    (loaded)="onAutoCompleteLoad($event)"
    (suggestionViewBecameVisible)="suggestionVisible($event)">
    <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="100%">
        <ng-template tkSuggestionItemTemplate let-item="item">
            <StackLayout orientation="vertical" margin="0">
                <Label [text]="item.text" margin="0" backgroundColor="rgba(255,255,255,0)"></Label>
            </StackLayout>
        </ng-template>
    </SuggestionView>
</RadAutoCompleteTextView>

```
// get a ref for your RadAutoCompleteTextView

@ViewChild('autocomp') public autocomp: ElementRef;
...
//where you want ot set focus programatically for android just add this

if (isAndroid)
{
setTimeout(() => {
this.autocomp.nativeElement.android.getTextField().requestFocus();
utils.ad.showSoftInput(this.autocomp.nativeElement.android.getTextField());
}, 600);
}
```

[priyakathiresan1]

var autocompletetxt= page.getViewById("autocomplete");
autocompletetxt.focus();
utils.ad.showSoftInput(autocompletetxt.nativeView);

Does not Show Cursor? help me
Thank u.

[tommag21]

Any news on this?

[tommag21]

My workaround (NS-Vue) based on jahngergely's

<RadAutoCompleteTextView @focus="onFocus" />

onFocus({ object }) {
    if (object.android) {
        setTimeout(() => {
            let textField = object.android.getTextField();
            textField.requestFocus();
            utils.ad.showSoftInput(textField);
        }, 100);
    }
}