semmel / on-screen-keyboard-detector Goto Github PK

Im running an Ionic project with angular 9.1.12 and get the following error when trying to build:

ERROR in node_modules/on-screen-keyboard-detector/src/osk-detector.d.ts:1:1 - error TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.

1 const oskd: {

window.innerHeight may shrink as well if the OSK appears.
Example:
In demo/index.html, focus an input to reveal the keyboard (visible event fired),
and then scroll the page to the bottom (hidden event fired, although keyboard still visible).
Possible Fix:
Instead use screen.height or an initial measurement of the layout viewport dimensions

To reproduce with demo/index.html:

• focus an input
• Pinch zoom
• scroll to the bottom
• hit done on the OSK dismissing the KB
  --> Error KB still detected.

Not happens on previous (stable) Safari.

Analysis

Scroll position completely awkward, possible window missing a scroll event because the window is not scrolled after hitting done.

I had to roll back my use of this package because it crashes on browsers where screen.orientation.type is not supported, most notably on desktop Safari. 😔

Here's the compatibility table: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

I hope you're able to implement this without using the screen.orientation API, or if not add these unsupported browsers to the limitations in the README!

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.1.0" from the root project

First of all, thanks for your work @semmel 🙌 , we are working with this tool, but sometimes we got the error below, can we add a validation in the getScreenOrientationType function before evaluating the screen variable?

undefined is not an object (evaluating 'screen.orientation.type')

I've been using this lib for a while happily, thanks! But it, unfortunately, stopped working recently after an upgrade to React18 and a bunch of other stuff. Not sure what exactly caused it. I also noticed this uses rambda which is not ideal for us as it's the only place it's used so it adds extra dependency. As we use react + typescript, I put together the following replacement. Maybe somebody else will find it useful so posting it here:

import { useEffect, useState } from 'react';

interface GeometryChangeEvent {
  target: { boundingRect: DOMRect };
}

interface VirtualKeyboard {
  addEventListener(
    type: 'geometrychange',
    listener: (e: GeometryChangeEvent) => void
  ): void;
  removeEventListener(
    type: 'geometrychange',
    listener: (e: GeometryChangeEvent) => void
  ): void;
  overlaysContent: boolean;
}

declare global {
  interface Navigator {
    virtualKeyboard?: VirtualKeyboard;
  }
}

const useOnScreenKeyboard = (): boolean => {
  const [isKeyboardVisible, setKeyboardVisibility] = useState(false);

  useEffect(() => {
    if (!navigator.virtualKeyboard) {
      console.warn('Virtual Keyboard API not supported');
      return;
    }
    const handleKeyboardChange = (e: GeometryChangeEvent): void => {
      const { width, height } = e?.target?.boundingRect ?? {};
      setKeyboardVisibility(height > 0 || width > 0);
    };
    navigator.virtualKeyboard.overlaysContent = true;
    navigator.virtualKeyboard.addEventListener(
      'geometrychange',
      handleKeyboardChange
    );
    return () => {
      navigator.virtualKeyboard.removeEventListener(
        'geometrychange',
        handleKeyboardChange
      );
    };
  }, []);

  return isKeyboardVisible;
};

export default useOnScreenKeyboard;

Keep in mind you'll have to put something like this:

body {
  padding-bottom: env(keyboard-inset-height, 0px);
}

In your CSS to achieve similar results to the default behavior.

A bunch of the Type declarations in the code will eventually be omitted once official support is there. Hope it comes in handy for somebody!

SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.

I'm not familiar with @most/core

The following error appears occasionally on iPhone/iPad devices.
TypeError undefined is not an object (evaluating 'screen.orientation.type')

Maybe you should add a fix like here https://github.com/akamai/boomerang/pull/215/files

This lib has about 250 SLoC, but it weighs 12.6kB gzipped because it brings a lot of stuff from Ramda and Most.js. Is there any chance it can be rewritten in plain JS? The two major benefits would be:

• It would probably go down to less than 1kB gzipped
• It would be easier for people to contribute, debug if needed, or even just quickly read the code and learn how it works without the need to understand how Ramda and Most.js work

https://bundlephobia.com/package/[email protected]