@klyftig/mobile-ui 1.3.9 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "scripts": {
     "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
   },

package/src/components/GlassInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef, memo } from 'react';
+import React, { useState, useCallback, useEffect, memo } from 'react';
 import { View, TextInput as RNTextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
@@ -60,19 +60,23 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
   const [isFocused, setIsFocused] = useState(false);
-  const inputRef = useRef<RNTextInput>(null);
+  // Reinforces the `selection` prop below: on Android, setting `selection` on
+  // the SAME render as a `value` that's longer than the field's width is
+  // often ignored — the native EditText hasn't measured/laid out the text yet,
+  // so it doesn't know where to scroll to reveal position 0. `setNativeProps`
+  // does NOT reliably fix this on Android either (selection isn't reliably
+  // forwarded through that imperative path for TextInput) — it has to be a
+  // genuine PROP change through normal React reconciliation to hit the native
+  // "set selection and scroll" command. A fresh object (new reference) fed
+  // through state a tick after mount, once layout has committed, does that.
+  const [delayedSelectionStart, setDelayedSelectionStart] = useState<typeof SELECTION_START | undefined>(undefined);
 
-  // Reinforces the `selection` prop below: on Android, setting `selection`
-  // on the SAME render as a `value` that's longer than the field's width is
-  // often ignored — the native EditText hasn't measured/laid out the text
-  // yet, so it doesn't know where to scroll to reveal position 0. Re-asserting
-  // via setNativeProps a tick after layout commits (not the same frame)
-  // reliably forces the scroll where the declarative prop alone doesn't.
   useEffect(() => {
+    setDelayedSelectionStart(undefined);
     if (isFocused || multiline) return;
     const id = setTimeout(() => {
-      inputRef.current?.setNativeProps({ selection: SELECTION_START });
-    }, 0);
+      setDelayedSelectionStart({ start: 0, end: 0 });
+    }, 50);
     return () => clearTimeout(id);
   }, [value, isFocused, multiline]);
 
@@ -107,7 +111,6 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
           )}
           <RNTextInput
-            ref={inputRef}
             value={value}
             onChangeText={onChangeText}
             placeholder={placeholder}
@@ -121,7 +124,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             onFocus={handleFocus}
             onBlur={handleBlur}
             selectTextOnFocus={selectTextOnFocus}
-            selection={!isFocused && !multiline ? SELECTION_START : undefined}
+            selection={!isFocused && !multiline ? (delayedSelectionStart ?? SELECTION_START) : undefined}
             multiline={multiline}
             numberOfLines={numberOfLines}
             textAlignVertical={multiline ? 'top' : undefined}