Forward TextareaField ref (#987)

segmentio · Sep 11, 2020 · b021089 · b021089
1 parent c45f702
commit b021089
Showing 1 changed file with 63 additions and 60 deletions.
diff --git a/src/textarea/src/TextareaField.js b/src/textarea/src/TextareaField.js
@@ -1,69 +1,72 @@
-import React, { memo } from 'react'
+import React, { memo, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { splitBoxProps } from 'ui-box'
 import { FormField } from '../../form-field'
 import { useId } from '../../hooks'
 import Textarea from './Textarea'
 
-const TextareaField = memo(function TextareaField(props) {
- const id = useId('TextareaField', props.id)
-
- const {
- // We are using the id from the state
- id: unusedId,
-
- // FormField props
- hint,
- label,
- description,
- validationMessage,
-
- // Textarea props
- inputHeight = 80,
- /** The input width should be as wide as the form field. */
- inputWidth = '100%',
- disabled,
- required,
- isInvalid,
- appearance,
- placeholder,
- spellCheck,
-
- // Rest props are spread on the FormField
- ...rest
- } = props
-
- /**
- * Split the wrapper props from the input props.
- */
- const { matchedProps, remainingProps } = splitBoxProps(rest)
-
- return (
- <FormField
- marginBottom={24}
- label={label}
- isRequired={required}
- hint={hint}
- description={description}
- validationMessage={validationMessage}
- labelFor={id}
- {...matchedProps}
- >
- <Textarea
- id={id}
- width={inputWidth}
- height={inputHeight}
- disabled={disabled}
- required={required}
- isInvalid={isInvalid}
- appearance={appearance}
- placeholder={placeholder}
- spellCheck={spellCheck}
- {...remainingProps}
- />
- </FormField>
- )
-})
+const TextareaField = memo(
+ forwardRef(function TextareaField(props, ref) {
+ const id = useId('TextareaField', props.id)
+
+ const {
+ // We are using the id from the state
+ id: unusedId,
+
+ // FormField props
+ hint,
+ label,
+ description,
+ validationMessage,
+
+ // Textarea props
+ inputHeight = 80,
+ /** The input width should be as wide as the form field. */
+ inputWidth = '100%',
+ disabled,
+ required,
+ isInvalid,
+ appearance,
+ placeholder,
+ spellCheck,
+
+ // Rest props are spread on the FormField
+ ...rest
+ } = props
+
+ /**
+ * Split the wrapper props from the input props.
+ */
+ const { matchedProps, remainingProps } = splitBoxProps(rest)
+
+ return (
+ <FormField
+ marginBottom={24}
+ label={label}
+ isRequired={required}
+ hint={hint}
+ description={description}
+ validationMessage={validationMessage}
+ labelFor={id}
+ {...matchedProps}
+ >
+ <Textarea
+ id={id}
+ width={inputWidth}
+ height={inputHeight}
+ disabled={disabled}
+ required={required}
+ isInvalid={isInvalid}
+ appearance={appearance}
+ placeholder={placeholder}
+ spellCheck={spellCheck}
+ ref={ref}
+ {...remainingProps}
+ />
+ </FormField>
+ )
+ })
+)
 
 TextareaField.propTypes = {
  /**