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

sagarkothari88(77)

Published in

HiveDevs

Words

177

Reading

1 min

Listen

Play

I faced following issue.

footer

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

footer-keyboard

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>