device detection script and android input fix (uses onBlurCapture because onkeydown is broken on chrome)

deviceDetect.tsx

import type { FocusEvent, KeyboardEvent } from 'react';

const [isDesktop, setIsDesktop] = useState<boolean>(false);
useEffect(() => {
  (async () => {
    setIsDesktop((await deviceDetect()).isDesktop);
  })();
}, []);

export const deviceDetect = async (): Promise<
  typeof import('react-device-detect')
> => {
  return await import('react-device-detect');
};

export const handleTabInputElemMobile = (
  evt: FocusEvent<HTMLInputElement>,
  callback: () => void
): void => {
  // from https://stackoverflow.com/a/11160055
  const element = evt.currentTarget;
  element.setAttribute('readonly', 'readonly');
  element.setAttribute('disabled', 'true');
  // wait until the attributes are updated
  setTimeout(() => {
    element.blur(); // close keyboard
    element.removeAttribute('readonly');
    element.removeAttribute('disabled');
  }, 100);
};