radautocomplete菜单在使用底部导航进行导航时会弹出打开

问题描述 投票:0回答:1

我的一个页面中有一个radautocomplete,并且我在应用中使用了底部导航。

第一次导航到该页面很好,但是此后,当我导航到该页面时,建议菜单会自动弹出,就像我在自动完成功能中键入内容一样,但我没有。我什至在表格中加了textfields来代替焦点,但这并没有使事情变得更好。

这里是playground sample

以防将来操场破裂:

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();
nativescript
1个回答
0
投票

我想这个问题是特定于Android的,iOS似乎工作正常。您可能会在Github上提出问题,同时可能的解决方法是在visibility事件的建议视图上设置unloaded,在textChanged事件上将其切换回。

Updated Playground Sample

© www.soinside.com 2019 - 2024. All rights reserved.