Fix issue with TextField floating placeholder offset when it includes a leading accessory (#1700)

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -98,9 +98,10 @@ export default class TextFieldScreen extends Component {
           <TextField
             ref={this.input2}
             placeholder="Enter URL"
+            floatingPlaceholder
             text70
             leadingAccessory={
-              <Text text70 blue30>
+              <Text text70 blue30 marginR-2>
                 Https://
               </Text>
             }

generatedTypes/src/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export { default as useCombinedRefs } from './useCombinedRefs';
 export { default as useToggleValue } from './useToggleValue';
 export { default as useDidUpdate } from './useDidUpdate';
+export { default as useMeasure } from './useMeasure';
 export { default as useOrientation } from './useOrientation';
 export { default as useScrollEnabler } from './useScrollEnabler';
 export { default as useScrollReached } from './useScrollReached';

generatedTypes/src/hooks/useMeasure/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { View as RNView } from 'react-native';
+interface Measurements {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    pageX: number;
+    pageY: number;
+}
+declare const _default: () => {
+    ref: import("react").MutableRefObject<RNView | undefined>;
+    measurements: Measurements | undefined;
+};
+export default _default;

generatedTypes/src/incubator/TextField/FloatingPlaceholder.d.ts

@@ -19,9 +19,10 @@ export interface FloatingPlaceholderProps {
      */
     floatOnFocus?: boolean;
     validationMessagePosition?: ValidationMessagePosition;
+    extraOffset?: number;
 }
 declare const FloatingPlaceholder: {
-    ({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle, floatOnFocus, validationMessagePosition }: FloatingPlaceholderProps): JSX.Element;
+    ({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle, floatOnFocus, validationMessagePosition, extraOffset }: FloatingPlaceholderProps): JSX.Element;
     displayName: string;
 };
 export default FloatingPlaceholder;

generatedTypes/src/incubator/TextField/usePreset.d.ts

@@ -146,6 +146,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     floatingPlaceholderColor?: import("./types").ColorType | undefined;
     floatingPlaceholderStyle?: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | undefined;
     floatOnFocus?: boolean | undefined;
+    extraOffset?: number | undefined;
     enableErrors?: boolean | undefined;
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native").TextStyle | undefined;
@@ -475,6 +476,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     floatingPlaceholderColor?: import("./types").ColorType | undefined;
     floatingPlaceholderStyle?: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | undefined;
     floatOnFocus?: boolean | undefined;
+    extraOffset?: number | undefined;
     enableErrors?: boolean | undefined;
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native").TextStyle | undefined;
@@ -1036,6 +1038,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
         includeFontPadding?: boolean | undefined;
     };
     floatOnFocus?: boolean | undefined;
+    extraOffset?: number | undefined;
     enableErrors: boolean;
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native").TextStyle | undefined;

src/hooks/index.ts

@@ -1,6 +1,7 @@
 export {default as useCombinedRefs} from './useCombinedRefs';
 export {default as useToggleValue} from './useToggleValue';
 export {default as useDidUpdate} from './useDidUpdate';
+export {default as useMeasure} from './useMeasure';
 export {default as useOrientation} from './useOrientation';
 export {default as useScrollEnabler} from './useScrollEnabler';
 export {default as useScrollReached} from './useScrollReached';

src/hooks/useMeasure/index.ts

@@ -0,0 +1,35 @@
+import {useEffect, useRef, useState} from 'react';
+import {MeasureOnSuccessCallback, View as RNView} from 'react-native';
+
+interface Measurements {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+export default () => {
+  const ref = useRef<RNView>();
+  const [measurements, setMeasurements] = useState<Measurements | undefined>();
+
+  const onMeasure: MeasureOnSuccessCallback = (x, y, width, height, pageX, pageY) => {
+    setMeasurements({
+      x,
+      y,
+      width,
+      height,
+      pageX,
+      pageY
+    });
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      ref.current?.measure?.(onMeasure);
+    }, 0);
+  }, []);
+
+  return {ref, measurements};
+};

src/incubator/TextField/FloatingPlaceholder.tsx

@@ -26,6 +26,7 @@ export interface FloatingPlaceholderProps {
    */
   floatOnFocus?: boolean;
   validationMessagePosition?: ValidationMessagePosition;
+  extraOffset?: number;
 }
 
 const FLOATING_PLACEHOLDER_SCALE = 0.875;
@@ -35,7 +36,8 @@ const FloatingPlaceholder = ({
   floatingPlaceholderColor = Colors.grey40,
   floatingPlaceholderStyle,
   floatOnFocus,
-  validationMessagePosition
+  validationMessagePosition,
+  extraOffset = 0
 }: FloatingPlaceholderProps) => {
   const context = useContext(FieldContext);
   const [placeholderOffset, setPlaceholderOffset] = useState({
@@ -52,14 +54,17 @@ const FloatingPlaceholder = ({
           scale: interpolateValue(animation, [1, FLOATING_PLACEHOLDER_SCALE])
         },
         {
-          translateX: interpolateValue(animation, [0, -placeholderOffset.left])
+          translateX: interpolateValue(animation, [
+            0,
+            -placeholderOffset.left - extraOffset / FLOATING_PLACEHOLDER_SCALE
+          ])
         },
         {
           translateY: interpolateValue(animation, [0, -placeholderOffset.top])
         }
       ]
     };
-  }, [placeholderOffset]);
+  }, [placeholderOffset, extraOffset]);
 
   useEffect(() => {
     const toValue = floatOnFocus ? context.isFocused || context.hasValue : context.hasValue;

src/incubator/TextField/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../commons/new';
 import View from '../../components/view';
 import {Colors} from '../../style';
+import {useMeasure} from '../../hooks';
 import {ValidationMessagePosition, Validator} from './types';
 import {shouldHidePlaceholder} from './Presenter';
 import Input, {InputProps} from './Input';
@@ -151,6 +152,7 @@ const TextField = (props: InternalTextFieldProps) => {
     children,
     ...others
   } = usePreset(props);
+  const {ref: leadingAccessoryRef, measurements: leadingAccessoryMeasurements} = useMeasure();
   const {onFocus, onBlur, onChangeText, fieldState, validateField} = useFieldState(others);
 
   const context = useMemo(() => {
@@ -186,7 +188,8 @@ const TextField = (props: InternalTextFieldProps) => {
         )}
         <View style={[paddings, fieldStyle]} row centerV>
           {/* <View row centerV> */}
-          {leadingAccessory}
+          {/* @ts-expect-error */}
+          {leadingAccessory && <View ref={leadingAccessoryRef}>{leadingAccessory}</View>}
           <View flexG>
             {floatingPlaceholder && (
               <FloatingPlaceholder
@@ -195,6 +198,7 @@ const TextField = (props: InternalTextFieldProps) => {
                 floatingPlaceholderColor={floatingPlaceholderColor}
                 floatOnFocus={floatOnFocus}
                 validationMessagePosition={validationMessagePosition}
+                extraOffset={leadingAccessoryMeasurements?.width}
               />
             )}
             {children || (