@klyftig/mobile-ui 1.3.8 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.8",
+  "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, 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,6 +60,25 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
   const [isFocused, setIsFocused] = useState(false);
+  // 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);
+
+  useEffect(() => {
+    setDelayedSelectionStart(undefined);
+    if (isFocused || multiline) return;
+    const id = setTimeout(() => {
+      setDelayedSelectionStart({ start: 0, end: 0 });
+    }, 50);
+    return () => clearTimeout(id);
+  }, [value, isFocused, multiline]);
 
   const handleFocus = useCallback(() => {
     setIsFocused(true);
@@ -105,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}