@klyftig/mobile-ui 1.3.7 → 1.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "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, useRef, 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';
@@ -28,6 +28,13 @@ interface GlassInputProps {
   selectTextOnFocus?: boolean;
 }
 
+// When a single-line input is not focused, anchor the selection to the start so
+// iOS/Android scroll a value longer than the field to reveal its BEGINNING
+// ("Carrot - Cream Sauce…") instead of its tail ("…Sauce - pistachio nuts").
+// Only applied while unfocused — during editing the selection stays uncontrolled
+// so the caret follows taps and typing normally.
+const SELECTION_START = { start: 0, end: 0 } as const;
+
 const GlassInputComponent: React.FC<GlassInputProps> = ({
   label,
   value,
@@ -53,6 +60,21 @@ 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. 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(() => {
+    if (isFocused || multiline) return;
+    const id = setTimeout(() => {
+      inputRef.current?.setNativeProps({ selection: SELECTION_START });
+    }, 0);
+    return () => clearTimeout(id);
+  }, [value, isFocused, multiline]);
 
   const handleFocus = useCallback(() => {
     setIsFocused(true);
@@ -85,6 +107,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
           )}
           <RNTextInput
+            ref={inputRef}
             value={value}
             onChangeText={onChangeText}
             placeholder={placeholder}
@@ -98,6 +121,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             onFocus={handleFocus}
             onBlur={handleBlur}
             selectTextOnFocus={selectTextOnFocus}
+            selection={!isFocused && !multiline ? SELECTION_START : undefined}
             multiline={multiline}
             numberOfLines={numberOfLines}
             textAlignVertical={multiline ? 'top' : undefined}