Quasar - How to hide footer-view when mobile-device-keyboard is shown?

I faced following issue.

Footer jumps on top of the keyboard. This is annoying user-experience.

How to hide footer when keyboard is shown?

• Let's solve it with capacitorjs's keyboard plugin

• Install @capacitor/keyboard

npm install @capacitor/keyboard

• Make sure to sync it

npx cap sync

• Import it to your Page

import { Keyboard } from '@capacitor/keyboard';
import { defineComponent, ref } from 'vue';
import { api } from 'boot/axios';

• Update your Javascript code of that page as follows

export default defineComponent({
  setup() {
    const $q = useQuasar();
    const data = ref(null);
    Keyboard.addListener('keyboardWillShow', (info) => {
      console.log('keyboard will show with height:', info.keyboardHeight);
      data.value.keyboardShown = true;
    });
    Keyboard.addListener('keyboardWillHide', () => {
      console.log('keyboard will hide');
      data.value.keyboardShown = false;
    });
    return { data };
  },
});

• As you can see, in the above code snippet, we've now a flag-variable called keyboardShown.
• It will be updated whenever keyboard is shown on the screen.
• Based on that flag, update your component display.

</template>
  <BottomToolBar v-if="!($q.platform.is.capacitor && keyboardShown)">
    ....
    .....
    ...
  </BottomToolBar>
</template>

• With this, BottomToolBar won't show when keyboard appears.
• Amazing, isn't it?
• But wait, there is more.
• What if you are not running the app on mobile but on the desktop-web-browser?
• Your code starts crashing now.
• So, you need to import conditionally e.g. !($q.platform.is.capacitor && keyboardShown)
• Here is how you can do it.

<template>
  <div
    v-if="!($q.platform.is.capacitor && keyboardShown)"
    class="absolute-bottom q-pa-md bottom-buttons"
    :class="{ 'q-mb-md': $q.platform.is.android }"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { useQuasar } from 'quasar';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  data() {
    return {
      keyboardShown: false,
    };
  },
  setup() {
    const data = ref(null);
    return { data };
  },
  mounted() {
    const $q = useQuasar();
    if ($q.platform.is.capacitor) {
      import('@capacitor/keyboard').then((Keyboard) => {
        Keyboard.Keyboard.addListener('keyboardWillShow', (info) => {
          // console.log('keyboard will show with height:', info.keyboardHeight);
          this.keyboardShown = true;
        });
        Keyboard.Keyboard.addListener('keyboardDidHide', () => {
          // console.log('keyboard did hide');
          this.keyboardShown = false;
        });
      });
    }
  },
});
</script>

Now you know how to hide specific components when keyboard appears.
Cheers.

My Previous posts about Development using Quasar

• Create a project with Quasar Framework
• Add VS Plugins, Create a Component

---

Support me

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD