Is it a Bug? Autocomplete dropdown does not render revisiting the page after navigating to home

I have link in a home page where I have a autocomplete. I click on the autocomplete link go to autocomplete page and I select some value from the autocomplete dropdown. Once done I click on the button on autocomplete page which navigates to home page.

Now when I again go to autocomplete page by clicking on the link on home page. The autocomplete on the page do not render anything.

PS:
I encounter this problem only when I use stackPages=“true” in app.vue

 <f7-view url="/" :main="true" class="ios-edges" :preloadPreviousPage="false" :stackPages="true">

But do not encounter any problem and autocomplete works fine if do not use it for eg.

<f7-view url="/" :main="true" class="ios-edges" :preloadPreviousPage="false" >

In app.vue I have:

<template>
    <!-- App -->
    <f7-app :params="f7params">
        <f7-statusbar></f7-statusbar>
        <f7-panel left cover>
            <f7-view url="/panel-left/" links-view=".view-main" />
        </f7-panel>
        <f7-view url="/" :main="true" class="ios-edges" :preloadPreviousPage="false" :stackPages="true">
        </f7-view>
    </f7-app>
</template>

IN home.vue I have:

<f7-list-item link="/autocomplete/" title="Auto Complete" panel-close>
   <f7-icon slot="media" icon="fas fa-rss fa-fw"></f7-icon>
</f7-list-item>

and in autocomplete vue I have

<template>
  <f7-page @page:beforeremove="onPageBeforeRemove" @page:init="onPageInit">
    <f7-navbar title="Autocomplete" back-link="Back">
    </f7-navbar>

    <f7-block-title>Dropdown Autocomplete</f7-block-title>
        <div class="list no-hairlines-md">
      <div class="block-header">Dropdown With All Values</div>
      <ul>
        <li class="item-content item-input">
          <div class="item-inner">
            <div class="item-title item-label">Fruit</div>
            <div class="item-input-wrap">
              <input type="text" placeholder="Fruit" id="autocomplete-dropdown-all"/>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <f7-button fill @click.prevent="submit()" class="col">submit</f7-button>
  </f7-page>
</template>
<script>
  import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';

  export default {
    components: {
      f7Page,
      f7Navbar,
      f7BlockTitle,
    },
    data() {
      return {
        fruits: 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' '),
      };
    },
    methods: {
      submit(){
        const self = this;
        const app = self.$f7;
        const $ = self.$$;
        self.$f7router.navigate("/");
      },
      onPageBeforeRemove() {
        const self = this;
        self.autocompleteDropdownAll.destroy();
      },
      onPageInit() {
        const self = this;
        const app = self.$f7;
        const fruits = self.fruits;
        const $ = self.$$;

        // Dropdown with all values
        self.autocompleteDropdownAll = app.autocomplete.create({
          inputEl: '#autocomplete-dropdown-all',
          openIn: 'dropdown',
          source(query, render) {
            const results = [];
            // Find matched items
            for (let i = 0; i < fruits.length; i += 1) {
              if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
            }
            // Render items by passing array with result items
            render(results);
          },
        });

      },
    },
  };
</script>

I can recommend 2 things:

  1. Don’t use stackPages :slight_smile:
  2. Make more specific selector:
onPageInit(e, page) {
  ...,
  self.autocompleteDropdownAll = app.autocomplete.create({
    inputEl: page.$el.find('#autocomplete-dropdown-all'),
    ...
  })
}
1 Like

Thank you so very much Vladimir! What a great job you have done! Framework7 is amazing. Really great.:+1:

Would you kindly elaborate on what are the drawbacks of using stackPages or what is the reason for not recommending the stackpages?