5009 mobile modal improvements

client/packages/common/src/hooks/index.ts

@@ -22,7 +22,7 @@ export * from './useQueryParams';
 export * from './useUrlQuery';
 export * from './useToggle';
 export * from './useWindowDimensions';
-export * from './useKeyboardHeightAdjustment';
+export * from './useKeyboard';
 export * from './useNativeClient';
 export * from './useWebClient';
 export * from './useInterval';

client/packages/common/src/hooks/useDialog/useDialog.tsx

@@ -3,9 +3,11 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent, { DialogContentProps } from '@mui/material/DialogContent';
 import { TransitionProps } from '@mui/material/transitions';
 import { Slide } from '../../ui/animations';
-import { BasicModal, ModalTitle } from '@common/components';
-import { useIntlUtils } from '@common/intl';
-import { SxProps, Theme } from '@mui/material';
+import { BasicModal, IconButton, ModalTitle } from '@common/components';
+import { useIntlUtils, useTranslation } from '@common/intl';
+import { SxProps, Theme, useMediaQuery } from '@mui/material';
+import { useKeyboardContext } from '../useKeyboard';
+import { CloseIcon } from '@common/icons';
 
 type OkClickEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
 
@@ -53,6 +55,7 @@ export interface DialogProps {
   animationTimeout?: number;
   disableBackdrop?: boolean;
   disableEscapeKey?: boolean;
+  disableMobileFullScreen?: boolean;
 }
 
 interface DialogState {
@@ -98,6 +101,7 @@ const useSlideAnimation = (isRtl: boolean, timeout: number) => {
  * @property {number} [animationTimeout=500] the timeout for the slide animation
  * @property {boolean} [disableBackdrop=false] (optional) disable clicking the backdrop to close the modal
  * @property {boolean} [disableEscape=false] (optional) disable pressing of the escape key to close the modal
+ * @property {boolean} [disableMobileFullScreen=false] (optional) disable modal entering fullscreen mode on smaller screens
  * @property {boolean} isOpen (optional) is the modal open
  * @property {function} onClose (optional) method to run on closing the modal
  * @return {DialogState} the dialog state. Properties are:
@@ -113,6 +117,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => {
     animationTimeout = 500,
     disableBackdrop = true,
     disableEscapeKey = false,
+    disableMobileFullScreen = false,
   } = dialogProps ?? {};
   const [open, setOpen] = React.useState(false);
   const showDialog = useCallback(() => setOpen(true), []);
@@ -161,6 +166,9 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => {
       isRtl,
       animationTimeout
     );
+    const { isOpen: keyboardIsOpen } = useKeyboardContext();
+    const isSmallerScreen = useMediaQuery('(max-height: 850px)');
+    const t = useTranslation();
 
     const defaultPreventedOnClick =
       (onClick: (e?: OkClickEvent) => Promise<boolean>) =>
@@ -215,6 +223,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => {
       width: width ? Math.min(window.innerWidth - 50, width) : undefined,
     };
 
+    const fullScreen = isSmallerScreen && !disableMobileFullScreen;
+
     return (
       <BasicModal
         open={open}
@@ -224,7 +234,20 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => {
         sx={sx}
         TransitionComponent={Transition}
         disableEscapeKeyDown={false}
+        fullScreen={fullScreen}
       >
+        {fullScreen && (
+          <IconButton
+            icon={<CloseIcon />}
+            color="primary"
+            onClick={() => {
+              onClose && onClose();
+              hideDialog();
+            }}
+            sx={{ position: 'absolute', right: 0, top: 0, padding: 2 }}
+            label={t('button.close')}
+          />
+        )}
         {title ? <ModalTitle title={title} /> : null}
         <form
           style={{
@@ -250,8 +273,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => {
           <DialogActions
             sx={{
               justifyContent: 'center',
-              marginBottom: '30px',
-              marginTop: '30px',
+              marginBottom: keyboardIsOpen ? 0 : '30px',
+              marginTop: keyboardIsOpen ? 0 : '30px',
             }}
           >
             {cancelButton}

client/packages/common/src/hooks/useKeyboard/Keyboard.tsx

@@ -0,0 +1,64 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Keyboard } from '@capacitor/keyboard';
+import { Capacitor } from '@capacitor/core';
+import { createRegisteredContext } from 'react-singleton-context';
+
+interface KeyboardControl {
+  isOpen: boolean;
+  isEnabled: boolean;
+}
+
+const defaultKeyboardControl: KeyboardControl = {
+  isOpen: false,
+  isEnabled: false,
+};
+
+const KeyboardContext = createRegisteredContext<KeyboardControl>(
+  'keyboard-context',
+  defaultKeyboardControl
+);
+
+const { Provider } = KeyboardContext;
+
+export const KeyboardProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setOpen] = useState(false);
+  const isEnabled = Capacitor.isPluginAvailable('Keyboard');
+
+  useEffect(() => {
+    (async () => {
+      if (!isEnabled) return;
+
+      const showListener = await Keyboard.addListener('keyboardDidShow', () =>
+        setOpen(true)
+      );
+      const hideListener = await Keyboard.addListener('keyboardDidHide', () =>
+        setOpen(false)
+      );
+
+      return () => {
+        showListener.remove();
+        hideListener.remove();
+      };
+    })();
+  }, []);
+
+  return (
+    <Provider
+      value={{
+        isOpen,
+        isEnabled,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+};
+
+export const useKeyboardContext = () => {
+  const keyboardControl = useContext(KeyboardContext);
+  return keyboardControl;
+};

client/packages/common/src/hooks/useKeyboard/index.ts

@@ -0,0 +1 @@
+export * from './Keyboard';

client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx

@@ -16,6 +16,7 @@ import {
 } from './types';
 import { BasicTextInput } from '../TextInput';
 import { StyledPopper } from './components';
+import { useKeyboardContext, useToggle } from '@common/hooks';
 
 export interface AutocompleteProps<T>
   extends Omit<
@@ -73,9 +74,15 @@ export function Autocomplete<T>({
   getOptionLabel,
   popperMinWidth,
   inputProps,
+  open,
+  onOpen,
+  onClose,
   ...restOfAutocompleteProps
 }: PropsWithChildren<AutocompleteProps<T>>): JSX.Element {
   const filter = filterOptions ?? createFilterOptions(filterOptionConfig);
+  const keyboard = useKeyboardContext();
+  // manage popper display when android keyboard appears
+  const keyboardSelectControl = useToggle();
 
   const defaultRenderInput = (props: AutocompleteRenderInputParams) => (
     <BasicTextInput
@@ -104,6 +111,18 @@ export function Autocomplete<T>({
     />
   );
 
+  const getIsOpen = () => {
+    // Use passed in or default if not using android keyboard
+    if (!keyboard.isEnabled) return open;
+
+    // Keep popper closed until keyboard is open
+    // keyboard moves popper up & out of correct position
+    if (!keyboard.isOpen) return false;
+
+    // Use externally controlled `open` state if provided
+    return open ?? keyboardSelectControl.isOn;
+  };
+
   return (
     <MuiAutocomplete
       {...restOfAutocompleteProps}
@@ -126,6 +145,15 @@ export function Autocomplete<T>({
       onChange={onChange}
       getOptionLabel={getOptionLabel || defaultGetOptionLabel}
       PopperComponent={popperMinWidth ? CustomPopper : StyledPopper}
+      open={getIsOpen()}
+      onOpen={e => {
+        keyboard.isEnabled && keyboardSelectControl.toggleOn();
+        onOpen?.(e);
+      }}
+      onClose={(...args) => {
+        keyboard.isEnabled && keyboardSelectControl.toggleOff();
+        onClose?.(...args);
+      }}
     />
   );
 }

client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx

@@ -16,7 +16,11 @@ import {
   Box,
 } from '@mui/material';
 import { BasicTextInput } from '../TextInput';
-import { useDebounceCallback } from '@common/hooks';
+import {
+  useDebounceCallback,
+  useKeyboardContext,
+  useToggle,
+} from '@common/hooks';
 import type { AutocompleteProps } from './Autocomplete';
 import { StyledPopper } from './components';
 import { ArrayUtils } from '@common/utils';
@@ -65,11 +69,16 @@ export function AutocompleteWithPagination<T extends RecordWithId>({
   paginationDebounce,
   onPageChange,
   mapOptions,
+  open,
+  onOpen,
+  onClose,
   ...restOfAutocompleteProps
 }: PropsWithChildren<AutocompleteWithPaginationProps<T>>) {
   const filter = filterOptions ?? createFilterOptions(filterOptionConfig);
   const [isLoading, setIsLoading] = useState(true);
   const lastOptions = useRef<T[]>([]);
+  const keyboard = useKeyboardContext();
+  const keyboardSelectControl = useToggle();
 
   const options = useMemo(() => {
     if (!pages) {
@@ -167,6 +176,18 @@ export function AutocompleteWithPagination<T extends RecordWithId>({
     setTimeout(() => setIsLoading(false), LOADER_HIDE_TIMEOUT);
   }, [options]);
 
+  const getIsOpen = () => {
+    // Use passed in or default if not using android keyboard
+    if (!keyboard.isEnabled) return open;
+
+    // Keep popper closed until keyboard is open
+    // keyboard moves popper up & out of correct position
+    if (!keyboard.isOpen) return false;
+
+    // Use externally controlled `open` state if provided
+    return open ?? keyboardSelectControl.isOn;
+  };
+
   return (
     <MuiAutocomplete
       {...restOfAutocompleteProps}
@@ -190,6 +211,15 @@ export function AutocompleteWithPagination<T extends RecordWithId>({
       getOptionLabel={getOptionLabel || defaultGetOptionLabel}
       PopperComponent={popperMinWidth ? CustomPopper : StyledPopper}
       ListboxProps={listboxProps}
+      open={getIsOpen()}
+      onOpen={e => {
+        keyboard.isEnabled && keyboardSelectControl.toggleOn();
+        onOpen?.(e);
+      }}
+      onClose={(...args) => {
+        keyboard.isEnabled && keyboardSelectControl.toggleOff();
+        onClose?.(...args);
+      }}
     />
   );
 }

client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx

@@ -14,14 +14,16 @@ export const BasicModal: FC<DialogProps> = ({
   width = 500,
   height = 400,
   sx,
+  fullScreen,
   ...dialogProps
 }) => {
   const { isRtl } = useIntlUtils();
   return (
     <Dialog
+      fullScreen={fullScreen}
       PaperProps={{
         sx: {
-          borderRadius: '20px',
+          borderRadius: fullScreen ? undefined : '20px',
           minHeight: `${height}px`,
           minWidth: `${width}px`,
           direction: isRtl ? 'rtl' : 'ltr',

client/packages/common/src/ui/components/modals/InputModal/InputModal.tsx

@@ -21,7 +21,11 @@ export const InputModal = ({
   onClose,
   title,
 }: InputModalProps) => {
-  const { Modal } = useDialog({ isOpen, onClose });
+  const { Modal } = useDialog({
+    isOpen,
+    onClose,
+    disableMobileFullScreen: true,
+  });
   const [loading, setLoading] = useState(false);
 
   return (

client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps, Portal } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React, { FC, ReactNode, useEffect, useRef } from 'react';
-import { useHostContext } from '@common/hooks';
+import { useHostContext, useKeyboardContext } from '@common/hooks';
 import { useIsCentralServerApi } from '@openmsupply-client/common';
 
 const Container = styled('div')(() => ({
@@ -17,6 +17,7 @@ const Container = styled('div')(() => ({
 export const AppFooter: FC = () => {
   const { setAppFooterRef, setAppSessionDetailsRef, fullScreen } =
     useHostContext();
+  const { isOpen: keyboardOpen } = useKeyboardContext();
   const appFooterRef = useRef(null);
   const appSessionDetailsRef = useRef(null);
   const isCentralServer = useIsCentralServerApi();
@@ -26,8 +27,10 @@ export const AppFooter: FC = () => {
     setAppSessionDetailsRef(appSessionDetailsRef);
   }, []);
 
+  const hideFooter = fullScreen || keyboardOpen;
+
   return (
-    <Box sx={{ display: fullScreen ? 'none' : undefined }}>
+    <Box sx={{ display: hideFooter ? 'none' : undefined }}>
       <Container ref={appFooterRef} style={{ flex: 0 }} />
       <Container
         ref={appSessionDetailsRef}