使用底部导航导航时会弹出 radautocomplete 菜单答案

【问题标题】：radautocomplete menu pops open when navigating with bottom navigation使用底部导航导航时会弹出 radautocomplete 菜单
【发布时间】：2019-12-22 05:13:10
【问题描述】：

我的一个页面中有一个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();

【问题讨论】：

是向前导航还是向后导航？你能设置一个可以重现问题的游乐场吗？
@forward 但不是我第一次打开应用程序后打开页面。不，我无法设置游乐场，因为由于限制，它在我的国家/地区无法使用。
你可能已经知道了，但你仍然可以使用 VPN，有很多 VPN 甚至是免费的 - 试试 windscribe。
@Manoj VPN 工作正常！太感谢了。我做了一个游乐场样本。

标签： nativescript

【解决方案1】：

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

Updated Playground Sample 1

更新

更改visibility 似乎隐藏了建议视图，但仍然占据相同的位置，因此自动完成字段下方的组件变得无法访问。我相信setSuggestionViewHeight(...) 可以解决这个问题。

Updated Playground Sample 2

【讨论】：

这不是一个好的解决方案。它隐藏了建议，但不会关闭它。因此，建议视图的幽灵会阻止点击其下方的组件。
确实，这不是一个好的解决方案，而是一种解决方法。正如我已经提到的，该插件不是开源的，因此很难找到一个好的解决方案。我鼓励你提出一个关于插件团队跟进的 Github 问题。我还发现设置高度可以工作，似乎没有问题。
正是我所需要的。我有一个与 Angular 应用程序类似的案例。在 2 个不同的页面上显示自动完成功能会在选择完成后触发一个空的建议框。但是，我使用了“suggestionViewBecameVisible”事件和额外的检查来捕获第二个触发器。