Use controlled rawValue prop to check if we need to reset height on Android
This commit is contained in:
@@ -346,6 +346,7 @@ export function Composer({
|
|||||||
{...tapper.inputProps}
|
{...tapper.inputProps}
|
||||||
{...sift.targetProps}
|
{...sift.targetProps}
|
||||||
ref={mergeRefs([ref, tapper.inputProps.ref, sift.targetProps.ref])}
|
ref={mergeRefs([ref, tapper.inputProps.ref, sift.targetProps.ref])}
|
||||||
|
rawValue={tapper.state.text}
|
||||||
onBlur={e => {
|
onBlur={e => {
|
||||||
rest.onBlur?.(e)
|
rest.onBlur?.(e)
|
||||||
setActiveFacet(null)
|
setActiveFacet(null)
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import {useMemo, useRef, useState} from 'react'
|
import {useEffect, useMemo, useRef, useState} from 'react'
|
||||||
import {
|
import {
|
||||||
TextInput,
|
TextInput,
|
||||||
type TextInputContentSizeChangeEvent,
|
type TextInputContentSizeChangeEvent,
|
||||||
@@ -16,6 +16,17 @@ export type AutosizedTextareaProps = Omit<TextInputProps, 'multiline'> & {
|
|||||||
minRows?: number
|
minRows?: number
|
||||||
maxRows?: number
|
maxRows?: number
|
||||||
onUpdateHeight?: (height: number) => void
|
onUpdateHeight?: (height: number) => void
|
||||||
|
/**
|
||||||
|
* In some cases, like on native, we may not pass in an actual `value` prop.
|
||||||
|
* This prop allows Android to know if the field was cleared and thereby
|
||||||
|
* reset its height. This is a small hack required because we need to
|
||||||
|
* explicitly set the `{height: nativeHeight}` on Android.
|
||||||
|
*
|
||||||
|
* If you notice height calcuation issues after clearing the field on
|
||||||
|
* Android, check if this value is being populated and cleared properly in
|
||||||
|
* the parent component.
|
||||||
|
*/
|
||||||
|
rawValue?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AutosizedTextarea({
|
export function AutosizedTextarea({
|
||||||
@@ -24,6 +35,7 @@ export function AutosizedTextarea({
|
|||||||
minRows = 1,
|
minRows = 1,
|
||||||
maxRows,
|
maxRows,
|
||||||
onUpdateHeight,
|
onUpdateHeight,
|
||||||
|
rawValue,
|
||||||
|
|
||||||
onChangeText: onChangeTextOuter,
|
onChangeText: onChangeTextOuter,
|
||||||
onContentSizeChange: onContentSizeChangeOuter,
|
onContentSizeChange: onContentSizeChangeOuter,
|
||||||
@@ -124,6 +136,22 @@ export function AutosizedTextarea({
|
|||||||
onContentSizeChangeOuter?.(e)
|
onContentSizeChangeOuter?.(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Manual height clearing required for Android because we're forced to set
|
||||||
|
* `{height: nativeHeight}` on Android, and even though `onContentSizeChange`
|
||||||
|
* fires, the height matches the existing height and we aren't able to reset.
|
||||||
|
*/
|
||||||
|
const prevRawValue = useRef(rawValue || '')
|
||||||
|
useEffect(() => {
|
||||||
|
if (!IS_ANDROID) return // everything else is fine
|
||||||
|
if (rawValue === undefined) return // uncontrolled
|
||||||
|
if (prevRawValue.current?.length && rawValue === '') {
|
||||||
|
setNativeHeight(minInputHeight)
|
||||||
|
onUpdateHeight?.(minInputHeight)
|
||||||
|
}
|
||||||
|
prevRawValue.current = rawValue
|
||||||
|
}, [rawValue, minInputHeight])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TextInput
|
<TextInput
|
||||||
multiline
|
multiline
|
||||||
|
|||||||
Reference in New Issue
Block a user