diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index a60956794a..90d20d94f7 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -146,7 +146,7 @@ function AltTextInner({ onChangeText={text => { setAltText(text) }} - value={altText} + defaultValue={altText} multiline numberOfLines={3} autoFocus diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx index d33db4d22c..e9e8d42224 100644 --- a/src/view/com/composer/photos/ImageAltTextDialog.tsx +++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx @@ -31,7 +31,7 @@ export const ImageAltTextDialog = ({ onChange, Portal, }: Props): React.ReactNode => { - const altTextRef = React.useRef(image.alt) + const [altText, setAltText] = React.useState(image.alt) return ( { onChange({ ...image, - alt: enforceLen(altTextRef.current, MAX_ALT_TEXT, true), + alt: enforceLen(altText, MAX_ALT_TEXT, true), }) }} Portal={Portal}> @@ -47,25 +47,27 @@ export const ImageAltTextDialog = ({ ) } const ImageAltTextInner = ({ - altTextRef, + altText, + setAltText, control, image, }: { - altTextRef: React.MutableRefObject + altText: string + setAltText: (text: string) => void control: DialogControlProps image: Props['image'] }): React.ReactNode => { const {_, i18n} = useLingui() const t = useTheme() const windim = useWindowDimensions() - const [altText, setAltText] = React.useState(image.alt) const imageStyle = React.useMemo(() => { const maxWidth = isWeb ? 450 : windim.width @@ -119,10 +121,9 @@ const ImageAltTextInner = ({ { - altTextRef.current = text setAltText(text) }} - value={altText} + defaultValue={altText} multiline numberOfLines={3} autoFocus