Forward TextField focus

infinitered · Oct 2, 2018 · 6359f4b · 6359f4b
1 parent 62e816e
commit 6359f4b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/boilerplate/src/views/shared/text-field/text-field.props.ts b/boilerplate/src/views/shared/text-field/text-field.props.ts
@@ -35,4 +35,6 @@ export interface TextFieldProps extends TextInputProperties {
    * Various look & feels.
    */
   preset?: "default"
+
+  forwardedRef?: any
 }
diff --git a/boilerplate/src/views/shared/text-field/text-field.story.tsx b/boilerplate/src/views/shared/text-field/text-field.story.tsx
@@ -82,6 +82,28 @@ storiesOf("TextField", module)
                 borderRadius: 4,
                 borderColor: "hotpink",
               }}
+  .add("Ref Forwarding", () => (
+    <Story>
+      <UseCase
+        text="Ref Forwarding"
+        usage=""
+      >
+        <State initial={{ value: "fancy colour" }}>
+          {({ state, setState }) => (
+            <TextField
+              onChangeText={value => setState({ value })}
+              value={state.value}
+              label="Name"
+              inputStyle={{
+                backgroundColor: "rebeccapurple",
+                color: "white",
+                padding: 40,
+                borderWidth: 10,
+                borderRadius: 4,
+                borderColor: "hotpink",
+              }}
+              forwardedRef={ref => ref && ref.focus()}
+              onFocus={() => console.tron.log("focus")}
             />
           )}
         </State>

diff --git a/boilerplate/src/views/shared/text-field/text-field.tsx b/boilerplate/src/views/shared/text-field/text-field.tsx
@@ -37,6 +37,7 @@ export class TextField extends React.Component<TextFieldProps, {}> {
       preset = "default",
       style: styleOverride,
       inputStyle: inputStyleOverride,
+      forwardedRef,
       ...rest,
     } = this.props
     const containerStyle: ViewStyle = { ...CONTAINER, ...PRESETS[preset], ...styleOverride }
@@ -52,6 +53,7 @@ export class TextField extends React.Component<TextFieldProps, {}> {
           underlineColorAndroid={color.transparent}
           {...rest}
           style={inputStyle}
+          ref={forwardedRef}
         />
       </View>
     )