Android airアプリ内でcontenteditable="true"のdivをフォーカスした時に、入力エリアがキーボードにかぶる

今回の環境は
lrabel blade + vue.js です。
Android の WebView にキーボードが被る問題
こちらの記事にあるような状況になってしまったので、html、css、jsにて対応しました。

入力エリアの上にキーボード被る問題

LINEのようなチャットシステム内で、

position :fixed;
bottom   :0;
width    :100%;
heidht   :100px;

上記プロパティを当てた入力エリアをタップした際、
キーボードが入力エリアコンポーネントの上に被ってしまい、何を入力しているのかわからない現象に陥りました。

入力エリアでは絵文字を使えるようにしていたため、divを使用していました。

<template>
    <div>
        〜〜省略〜〜
        <div contenteditable="true" id="emoji_editor" class="emoji-editor-content"></div>
       　　〜〜省略〜〜
    </div>
<template>

解決策

被る事を回避させることができませんでしたので、emoji-editorをタップした際にclassをふって、無理やりcssにて高さを出す仕組みを用意しました。(:cssを使えない状況でした)

<template>
    <div>   
        <div class="emoji-editor-wrap is_android-app"> //入力部分クリックでis_android-appを付与
            〜〜省略〜〜
            <div contenteditable="true" id="emoji_editor" class="emoji-editor__content"></div>
       　    　〜〜省略〜〜
        </div>
    </div>
<template>

.emoji-editor-wrap.is_android-app{
    height:400px;
}

そして、settimeout を使用してフォーカスを当てました。

$(document).on('touchend', (e) => {
    if (!$(e.target).closest('.emoji-editor__content').length) {
        setTimeout(() => {
            messageFooter.removeClass('is_android-app');
            emojiEditorContent.blur();
        }, 200);
    } else {
        messageFooter.addClass('is_android-app');
        setTimeout(() => {
            emojiEditorContent.focus();
        }, 200);
    }
});

settimeoutを使用しないと、フォーカスがあたりませんでした。
(settimeoutを０にすると、挙動がおかしくなったので200にしました。)

こちらを参考にしましたjquery - Set focus on div contenteditable element - Stack Overflow