@widergy/mobile-ui 1.23.1 → 1.23.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.23.2](https://github.com/widergy/mobile-ui/compare/v1.23.1...v1.23.2) (2024-09-12)
+
+
+### Bug Fixes
+
+* fix input bug ([#355](https://github.com/widergy/mobile-ui/issues/355)) ([82869dd](https://github.com/widergy/mobile-ui/commit/82869ddabb526824d2fd2c6da0f86bf0c8fca92d))
+
 ## [1.23.1](https://github.com/widergy/mobile-ui/compare/v1.23.0...v1.23.1) (2024-09-04)
 
 

package/lib/components/UTBaseInputField/constants.js

@@ -5,6 +5,12 @@ import PrefixAdornment from './components/PrefixAdornment';
 import SuffixAdornment from './components/SuffixAdornment';
 import TooltipAdornment from './components/TooltipAdornment';
 
+export const DEBOUNCE_DELAY = 150;
+export const DEBOUNCE_CONFIG = {
+  leading: false,
+  trailing: true
+};
+
 export const TYPES = {
   EMAIL: 'email',
   NUMBER: 'number',

package/lib/components/UTBaseInputField/index.js

@@ -4,16 +4,19 @@ import React, {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState
 } from 'react';
 import { View, TextInput } from 'react-native';
+import debounce from 'lodash/debounce';
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
 
+import { COMPONENTS_MAPPER, DEBOUNCE_CONFIG, DEBOUNCE_DELAY } from './constants';
 import { defaultProps, propTypes } from './proptypes';
-import { KEYBOARD_BY_TYPE, TYPES, COMPONENTS_MAPPER } from './constants';
+import { getPropsByType } from './utils';
 import { LINE_HEIGHT, retrieveStyle } from './theme';
 
 const UTBaseInputField = forwardRef(
@@ -45,7 +48,6 @@ const UTBaseInputField = forwardRef(
     },
     ref
   ) => {
-    const [displayValue, setDisplayValue] = useState(value);
     const [focused, setFocused] = useState(false);
     const inputWidthRef = useRef(null);
     const inputRef = useRef(null);
@@ -53,35 +55,55 @@ const UTBaseInputField = forwardRef(
     const theme = useTheme();
     const multiline = maxRows > 1;
 
+    const { secureTextEntry, autoCapitalize, keyboardType } = getPropsByType(type);
+
+    const setNativeText = useMemo(
+      () => debounce(text => inputRef.current?.setNativeProps({ text }), DEBOUNCE_DELAY, DEBOUNCE_CONFIG),
+      []
+    );
+
     const handleFocus = useCallback(
       event => {
         setFocused(true);
-        if (!multiline) setDisplayValue(value);
+        setNativeText(value);
         onFocus?.(event);
       },
-      [onFocus, value, multiline]
+      [onFocus, value, setNativeText]
     );
 
-    const truncateText = (text, width) => {
-      const currentWidth = width || inputWidthRef.current;
-      if (!currentWidth || !text) return text;
-      const charWidth = 8;
-      const maxCharsPerLine = Math.floor(currentWidth / charWidth);
-      return text.length > maxCharsPerLine ? `${text.substring(0, maxCharsPerLine - 3)}...` : text;
-    };
+    const truncateText = useCallback(
+      (text, width) => {
+        if (multiline) return text;
+        const currentWidth = width || inputWidthRef.current;
+        if (!currentWidth || !text) return text;
+        const charWidth = 8;
+        const maxCharsPerLine = Math.floor(currentWidth / charWidth);
+        return text.length > maxCharsPerLine ? `${text.substring(0, maxCharsPerLine - 3)}...` : text;
+      },
+      [multiline, inputWidthRef]
+    );
+
+    useEffect(() => {
+      if (!focused && !multiline) {
+        const truncated = truncateText(value, inputWidthRef.current);
+        setNativeText(truncated);
+      } else {
+        setNativeText(value);
+      }
+    }, [value, focused, multiline, setNativeText, truncateText]);
 
     useLayoutEffect(() => {
       if (inputRef.current) {
         inputRef.current.measure((_x, _y, width) => {
           inputWidthRef.current = width;
-          setDisplayValue(truncateText(value, width));
         });
       }
-    }, [value]);
+    }, [value, focused]);
 
     const handleBlur = event => {
       setFocused(false);
-      if (!multiline) setDisplayValue(truncateText(value));
+      const truncated = truncateText(value, inputWidthRef.current);
+      setNativeText(truncated);
       onBlur?.(event);
     };
 
@@ -92,26 +114,27 @@ const UTBaseInputField = forwardRef(
       onSubmitEditing?.(event);
     };
 
-    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
-      disabled: disabled && !readOnly,
-      error,
-      focused,
-      inputSize,
-      maxRows,
-      multiline,
-      readOnly,
-      style,
-      theme,
-      variant
-    });
-
-    useEffect(() => {
-      setDisplayValue(value);
-    }, [value]);
+    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = useMemo(
+      () =>
+        retrieveStyle({
+          disabled: disabled && !readOnly,
+          error,
+          focused,
+          inputSize,
+          maxRows,
+          multiline,
+          readOnly,
+          style,
+          theme,
+          variant
+        }),
+      [disabled, readOnly, error, focused, inputSize, maxRows, multiline, style, theme, variant]
+    );
 
     useImperativeHandle(ref, () => ({
       truncate: () => {
-        setDisplayValue(truncateText(value));
+        const truncated = truncateText(value, inputWidthRef.current);
+        setNativeText(truncated);
       },
       focus: () => {
         if (inputRef.current) {
@@ -126,10 +149,6 @@ const UTBaseInputField = forwardRef(
       ...inputRef.current
     }));
 
-    const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
-    const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
-    const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
-
     const renderElement = useCallback(
       element => {
         const Component = COMPONENTS_MAPPER[element.name];
@@ -160,15 +179,16 @@ const UTBaseInputField = forwardRef(
           <TextInput
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
+            defaultValue={value}
             editable={!disabled && !readOnly && editable}
             id={id ? `${id}` : undefined}
             keyboardType={keyboardType}
             maxLength={maxLength}
             multiline={multiline}
             numberOfLines={maxRows}
-            onChangeText={onChange}
-            onEndEditing={handleBlur}
             onBlur={handleBlur}
+            onChangeText={text => setNativeText(value) || onChange(text)}
+            onEndEditing={handleBlur}
             onFocus={handleFocus}
             onSubmitEditing={handleSubmitEditing}
             placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
@@ -180,7 +200,6 @@ const UTBaseInputField = forwardRef(
             selectionColor={inputStyle.selectionColor}
             style={inputStyle.root}
             type={type}
-            value={focused || multiline ? value : displayValue}
           />
           {rightAdornments.map(renderElement)}
         </View>

package/lib/components/UTBaseInputField/utils.js

@@ -0,0 +1,13 @@
+import { KEYBOARD_BY_TYPE, TYPES } from './constants';
+
+export const getPropsByType = type => {
+  const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
+  const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
+  const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
+
+  return {
+    autoCapitalize,
+    keyboardType,
+    secureTextEntry
+  };
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.23.1",
+  "version": "1.23.2",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [