feat: improve virtual keyboard management

changelogs/unreleased/86342.json

@@ -0,0 +1,5 @@
+{
+  "title": "Virtual keyboard: replace boolean by selection ('Always', 'Hidden on scannable inputs', 'Never')",
+  "type": "feat",
+  "packages": ["core", "ui"]
+}

packages/core/src/auth/i18n/en.json

@@ -7,7 +7,7 @@
   "Auth_Disconnected": "User disconnected",
   "Auth_LooseConnectionWithServer": "Session with server expired.",
   "User_User": "User",
-  "User_VirtualKeyboardConfig": "Hide virtual keyboard",
+  "User_VirtualKeyboardVisibility": "Virtual keyboard visibility",
   "User_ShowFilter": "Show filter",
   "User_ColorForColorBlind": "Color blind mode",
   "User_Show_Drawer_Subtitles": "Show modules subtitles",
@@ -22,6 +22,9 @@
   "User_Language": "Language",
   "User_Theme": "Theme",
   "User_NoAppUser": "The user could not be fetched. Please verify that you have the necessary permissions or contact your administrator.",
+  "User_KeyboardVisibility_Always": "Always",
+  "User_KeyboardVisibility_HiddenOnScannableInputs": "Hidden on scannable inputs",
+  "User_KeyboardVisibility_Never": "Never",
   "Auth_SliceAction_FetchLocalization": "fetch localizations",
   "Auth_SliceAction_FetchCompanies": "fetch companies",
   "Auth_SliceAction_FetchActiveUser": "fetch active user",

packages/core/src/auth/i18n/fr.json

@@ -7,7 +7,7 @@
   "Auth_Disconnected": "Utilisateur déconnecté",
   "Auth_LooseConnectionWithServer": "La session avec le serveur a expirée.",
   "User_User": "Utilisateur",
-  "User_VirtualKeyboardConfig": "Cacher le clavier virtuel",
+  "User_VirtualKeyboardVisibility": "Visibilité du clavier virtuel",
   "User_ShowFilter": "Afficher les filtres",
   "User_ColorForColorBlind": "Mode daltonien",
   "User_Show_Drawer_Subtitles": "Afficher les sous titres des modules",
@@ -22,6 +22,9 @@
   "User_Language": "Langage",
   "User_Theme": "Thème",
   "User_NoAppUser": "L'utilisateur n'a pas pu être récupéré. Veuillez vérifier que vous avez les permissions nécessaires ou contactez votre administrateur.",
+  "User_KeyboardVisibility_Always": "Toujous",
+  "User_KeyboardVisibility_HiddenOnScannableInputs": "Caché sur les entrées scannables",
+  "User_KeyboardVisibility_Never": "Jamais",
   "Auth_SliceAction_FetchLocalization": "récupération des localisations",
   "Auth_SliceAction_FetchCompanies": "récupération des sociétés",
   "Auth_SliceAction_FetchActiveUser": "récupération de l'utilisateur actif",

packages/core/src/auth/screens/SettingsScreen.js

@@ -21,6 +21,7 @@ import {StyleSheet, View} from 'react-native';
 import {useDispatch, useSelector} from 'react-redux';
 import {
   HorizontalRule,
+  Keyboard,
   Picker,
   Screen,
   ScrollView,
@@ -51,9 +52,9 @@ const SettingsScreen = ({children}) => {
 
   const {
     showFilter,
-    hideVirtualKeyboard,
     toggleFilterConfig,
-    toggleVirtualKeyboardConfig,
+    virtualKeyboardVisibility,
+    setVirtualKeyboardVisibility,
     setShowSubtitles,
     showSubtitles,
     showToolbox,
@@ -76,6 +77,13 @@ const SettingsScreen = ({children}) => {
     [Theme.isColorBlind, Theme.themes?.length],
   );
 
+  const keyboardVisibilityList = useMemo(() => {
+    return Object.entries(Keyboard.visibility).map(([key, value]) => ({
+      visibility: value,
+      name: I18n.t(`User_KeyboardVisibility_${key}`),
+    }));
+  }, [I18n]);
+
   const handleChangeTheme = useCallback(
     newTheme => Theme.changeTheme(newTheme),
     [Theme],
@@ -162,18 +170,21 @@ const SettingsScreen = ({children}) => {
         {(isLanguagePicker || isThemePicker) && (
           <HorizontalRule style={styles.lineSeparator} />
         )}
+        <Picker
+          title={I18n.t('User_VirtualKeyboardVisibility')}
+          defaultValue={virtualKeyboardVisibility}
+          listItems={keyboardVisibilityList}
+          labelField="name"
+          valueField="visibility"
+          onValueChange={setVirtualKeyboardVisibility}
+          emptyValue={false}
+        />
         <SwitchCard
           title={I18n.t('User_ShowFilter')}
           defaultValue={showFilter}
           onToggle={toggleFilterConfig}
           style={[styles.topSwitchCard, styles.switchCard]}
         />
-        <SwitchCard
-          title={I18n.t('User_VirtualKeyboardConfig')}
-          defaultValue={hideVirtualKeyboard}
-          onToggle={toggleVirtualKeyboardConfig}
-          style={styles.switchCard}
-        />
         <SwitchCard
           title={I18n.t('User_ColorForColorBlind')}
           defaultValue={Theme.isColorBlind}

packages/core/src/components/molecules/InputBarCodeCard/InputBarCodeCard.tsx

@@ -140,6 +140,7 @@ const InputBarCodeCard = ({
             onPress={onScanPress}
           />,
         ]}
+        isScannableInput
       />
     </View>
   );

packages/core/src/components/organisms/ScannerAutocompleteSearch/ScannerAutocompleteSearch.tsx

@@ -156,6 +156,7 @@ const ScannerAutocompleteSearch = ({
       moreLoading={moreLoading}
       isListEnd={isListEnd}
       isScrollViewContainer={isScrollViewContainer}
+      isScannableInput
     />
   );
 };

packages/core/src/hooks/use-storage-config.ts

@@ -19,14 +19,14 @@
 import {useCallback, useEffect, useMemo} from 'react';
 import {Dimensions} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
-import {useConfig, useTheme} from '@axelor/aos-mobile-ui';
+import {Keyboard, useConfig, useTheme} from '@axelor/aos-mobile-ui';
 import {storage} from '../storage/Storage';
 
 const CONFIG_STORAGE_KEY = 'ui_config';
 const SMALL_SCREEN_HEIGHT = 500;
 
 export const useStorageUpdater = () => {
-  const {showFilter, showSubtitles, showToolbox, hideVirtualKeyboard} =
+  const {showFilter, showSubtitles, showToolbox, virtualKeyboardVisibility} =
     useConfig();
   const {activeTheme, isColorBlind} = useTheme();
 
@@ -35,13 +35,13 @@ export const useStorageUpdater = () => {
       showFilter,
       showSubtitles,
       showToolbox,
-      hideVirtualKeyboard,
+      virtualKeyboardVisibility,
       activeTheme,
       isColorBlind,
     }),
     [
       activeTheme,
-      hideVirtualKeyboard,
+      virtualKeyboardVisibility,
       isColorBlind,
       showFilter,
       showSubtitles,
@@ -59,7 +59,7 @@ export const useConfigUpdater = (): {updateConfigFromStorage: () => void} => {
     setFilterConfig,
     setShowSubtitles,
     setShowToolbox,
-    setVirtualKeyboardConfig,
+    setVirtualKeyboardVisibility,
   } = useConfig();
   const {activateColorBlind, changeTheme} = useTheme();
 
@@ -70,7 +70,7 @@ export const useConfigUpdater = (): {updateConfigFromStorage: () => void} => {
       setFilterConfig(_config.showFilter);
       setShowSubtitles(_config.showSubtitles);
       setShowToolbox(_config.showToolbox);
-      setVirtualKeyboardConfig(_config.hideVirtualKeyboard);
+      setVirtualKeyboardVisibility(_config.virtualKeyboardVisibility);
       if (_config.isColorBlind) {
         activateColorBlind();
       } else {
@@ -83,23 +83,27 @@ export const useConfigUpdater = (): {updateConfigFromStorage: () => void} => {
     setFilterConfig,
     setShowSubtitles,
     setShowToolbox,
-    setVirtualKeyboardConfig,
+    setVirtualKeyboardVisibility,
   ]);
 
   return useMemo(() => ({updateConfigFromStorage}), [updateConfigFromStorage]);
 };
 
 export const useDefaultValuesOfUser = () => {
-  const {setFilterConfig, setVirtualKeyboardConfig} = useConfig();
+  const {setFilterConfig, setVirtualKeyboardVisibility} = useConfig();
 
   useEffect(() => {
     const _config = storage.getItem(CONFIG_STORAGE_KEY);
 
     if (_config == null) {
       DeviceInfo.getManufacturer().then(manufacturer =>
-        setVirtualKeyboardConfig(manufacturer === 'Zebra Technologies'),
+        setVirtualKeyboardVisibility(
+          manufacturer === 'Zebra Technologies'
+            ? Keyboard.visibility.HiddenOnScannableInputs
+            : Keyboard.visibility.Always,
+        ),
       );
       setFilterConfig(Dimensions.get('window').height > SMALL_SCREEN_HEIGHT);
     }
-  }, [setFilterConfig, setVirtualKeyboardConfig]);
+  }, [setFilterConfig, setVirtualKeyboardVisibility]);
 };

packages/ui/src/components/atoms/Input/Input.tsx

@@ -27,6 +27,7 @@ import {
 import {useThemeColor, useWritingType} from '../../../theme';
 import {useConfig} from '../../../config/ConfigContext';
 import {checkNullString} from '../../../utils';
+import {Keyboard} from '../../../types';
 
 interface InputProps {
   style?: any;
@@ -46,6 +47,7 @@ interface InputProps {
   onContentSizeChange?: (
     e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>,
   ) => void;
+  isScannableInput?: boolean;
 }
 
 const Input = ({
@@ -64,9 +66,10 @@ const Input = ({
   isFocus = false,
   writingType,
   onContentSizeChange,
+  isScannableInput = false,
 }: InputProps) => {
   const Colors = useThemeColor();
-  const {hideVirtualKeyboard} = useConfig();
+  const {virtualKeyboardVisibility} = useConfig();
   const writingStyle = useWritingType(writingType);
 
   const defaultStyle: TextStyle = useMemo(() => {
@@ -78,6 +81,19 @@ const Input = ({
     };
   }, [Colors.text, multiline, writingStyle]);
 
+  const displayKeayboard = useMemo(() => {
+    switch (virtualKeyboardVisibility) {
+      case Keyboard.visibility.Always:
+        return true;
+      case Keyboard.visibility.HiddenOnScannableInputs:
+        return !isScannableInput;
+      case Keyboard.visibility.Never:
+        return false;
+      default:
+        return true;
+    }
+  }, [isScannableInput, virtualKeyboardVisibility]);
+
   const onValueChange = useCallback(
     _value => {
       if (checkNullString(_value)) {
@@ -105,7 +121,7 @@ const Input = ({
       multiline={multiline}
       numberOfLines={numberOfLines}
       onBlur={onEndFocus}
-      showSoftInputOnFocus={hideVirtualKeyboard ? false : true}
+      showSoftInputOnFocus={displayKeayboard}
       autoFocus={isFocus}
       onContentSizeChange={onContentSizeChange}
     />

packages/ui/src/components/molecules/IconInput/IconInput.tsx

@@ -41,6 +41,7 @@ interface IconInputProps {
   isFocus?: boolean;
   leftIconsList?: any[];
   rightIconsList?: any[];
+  isScannableInput?: boolean;
 }
 
 const IconInput = ({
@@ -60,6 +61,7 @@ const IconInput = ({
   isFocus = false,
   leftIconsList = [],
   rightIconsList = [],
+  isScannableInput,
 }: IconInputProps) => {
   const Colors = useThemeColor();
   const styles = useMemo(() => getStyles(Colors), [Colors]);
@@ -106,6 +108,7 @@ const IconInput = ({
         keyboardType={keyboardType}
         onEndFocus={handleEndFocus}
         isFocus={isFocus}
+        isScannableInput={isScannableInput}
       />
       {rightIconsList.map((iconComponent, index) =>
         React.cloneElement(iconComponent, {key: index}),

packages/ui/src/components/organisms/AutoCompleteSearch/AutoCompleteSearch.tsx

@@ -65,6 +65,7 @@ interface AutocompleteSearchProps {
   isListEnd?: boolean;
   translator?: (translationKey: string) => string;
   isScrollViewContainer?: boolean;
+  isScannableInput?: boolean;
 }
 
 const AutoCompleteSearch = ({
@@ -91,6 +92,7 @@ const AutoCompleteSearch = ({
   isListEnd,
   translator,
   isScrollViewContainer = false,
+  isScannableInput,
 }: AutocompleteSearchProps) => {
   const [displayList, setDisplayList] = useState(false);
   const [previousState, setPreviousState] = useState(null);
@@ -300,6 +302,7 @@ const AutoCompleteSearch = ({
         onScanPress={onScanPress}
         scanIconColor={scanIconColor}
         selected={selected}
+        isScannableInput={isScannableInput}
       />
       {displayList && !oneFilter && (
         <SelectionContainer

packages/ui/src/components/organisms/SearchBar/SearchBar.tsx

@@ -40,6 +40,7 @@ interface SearchBarProps {
   onSearchPress?: () => void;
   disableSearchPress?: boolean;
   selected?: boolean;
+  isScannableInput?: boolean;
 }
 
 const SearchBar = ({
@@ -59,6 +60,7 @@ const SearchBar = ({
   onSearchPress = () => {},
   disableSearchPress = false,
   selected = false,
+  isScannableInput,
 }: SearchBarProps) => {
   const Colors = useThemeColor();
 
@@ -137,6 +139,7 @@ const SearchBar = ({
             onPress={onScanPress}
           />,
         ]}
+        isScannableInput={isScannableInput}
       />
     </View>
   );