Virtual Keyboard API hide() isn't working

Question

For a webpage running on Android Chrome, I'm attempting to implement the VirtualKeyboard API on an input field:

      <input
        id="my-input"
        placeholder="Click to edit"
        inputmode="text"
        virtualkeyboardpolicy="manual"
      />

The Javascript/jQuery part

      $("#my-input").on("focus", () => {
        navigator.virtualKeyboard.show();
      });

      $("#my-input").on("blur", () => {
        navigator.virtualKeyboard.hide();
      });

The show() method works fine, but the hide() methods doesn't work at all. Why is the hide() method being ignored?

Live demo with codesandbox

Answer 1

From https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard/hide

This method only works if the currently-focused element's virtualKeyboardPolicy attribute is set to manual and inputmode isn't set to none.

blur is called only after losing the focus while hide works only if the input is focused.

$("#my-input").on("blur", () => {
  $("#my-input").is(":focus"); // FALSE!
  navigator.virtualKeyboard.hide();
});

You need to find another event (ideally before blur or focusout) and try to close the keyboard from there while the input still has focus.