radautocomplete menu pops open when navigating with bottom navigation

Question

I have a radautocomplete in one of my pages and I'm using bottom-navigation in my app.

The first time I navigate to that page is fine, but after that, when I navigate to that page, the suggestions menu automatically pops open as if I had typed something in the autocomplete but I have not. I even put a textfields above that in my form to steal the focus but that didn't make things any better.

Here is a playground sample

In case playground breaks in the future:

App.vue

<template>
    <Page actionBarHidden="true">
        <BottomNavigation :selectedIndex="activePage">
            <TabStrip>
                <TabStripItem>
                    <label text="0" />
                </TabStripItem>
                <TabStripItem>
                    <label text="1" />
                </TabStripItem>
            </TabStrip>

            <TabContentItem>
                <button text="go to 1" @tap="activePage=1" />
            </TabContentItem>
            <TabContentItem>
                <StackLayout>
                    <TextField v-model="textFieldValue" hint="Enter text..."
                        backgroundColor="lightgray" />
                    <RadAutoCompleteTextView ref="autocomplete"
                        :items="choices" backgroundColor="lightgray"
                        completionMode="Contains" returnKeyType="done"
                        width="100%" borderRadius="5" />
                </StackLayout>
            </TabContentItem>
        </BottomNavigation>
    </Page>
</template>

<script>
    import {
        ObservableArray
    } from "tns-core-modules/data/observable-array";
    import {
        TokenModel
    } from "nativescript-ui-autocomplete";

    export default {
        data() {
            return {
                textFieldValue: "",
                choices: new ObservableArray(
                    ["one", "two", "three"].map(r => new TokenModel(r))
                ),
                activePage: 0
            };
        }
    };
</script>

<style scoped>
    TabContentItem>* {
        font-size: 30;
        text-align: center;
        vertical-align: center;
    }
</style>

app.js

import Vue from 'nativescript-vue';
import App from './components/App';

import RadAutoComplete from 'nativescript-ui-autocomplete/vue';
Vue.use(RadAutoComplete);

new Vue({ render: h => h('frame', [h(App)]) }).$start();

Answer 1

I guess the issue is specific to Android, iOS seem to work fine. You may raise an issue at Github, meanwhile a possible workaround is to set visibility on suggestion view on unloaded event, toggle it back on textChanged event.

Updated Playground Sample 1

Update

Changing visibility seems to hide the suggestion view but still occupy the same so components below auto complete field becomes inaccessible. I believe setSuggestionViewHeight(...) may solve this.

Updated Playground Sample 2