diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js index 2e358e88a1b3..f14b6c48b9dd 100644 --- a/src/pages/ReportWelcomeMessagePage.js +++ b/src/pages/ReportWelcomeMessagePage.js @@ -19,6 +19,7 @@ import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundVi import Form from '../components/Form'; import * as PolicyUtils from '../libs/PolicyUtils'; import {policyPropTypes, policyDefaultProps} from './workspace/withPolicy'; +import focusAndUpdateMultilineInputRange from '../libs/focusAndUpdateMultilineInputRange'; const propTypes = { ...withLocalizePropTypes, @@ -59,37 +60,49 @@ function ReportWelcomeMessagePage(props) { if (!welcomeMessageInputRef.current) { return; } - welcomeMessageInputRef.current.focus(); + focusAndUpdateMultilineInputRange(welcomeMessageInputRef.current); }} > - - -
- {props.translate('welcomeMessagePage.explainerText')} - - (welcomeMessageInputRef.current = el)} - value={welcomeMessage} - onChangeText={handleWelcomeMessageChange} - autoCapitalize="none" - textAlignVertical="top" - containerStyles={[styles.autoGrowHeightMultilineInput]} - /> - -
-
+ {({didScreenTransitionEnd}) => ( + + +
+ {props.translate('welcomeMessagePage.explainerText')} + + { + // Before updating the DOM, React sets the affected ref.current values to null. After updating the DOM, React immediately sets them to the corresponding DOM nodes + // to avoid focus multiple time, we should early return if el is null. + if (!el) { + return; + } + if (!welcomeMessageInputRef.current && didScreenTransitionEnd) { + focusAndUpdateMultilineInputRange(el); + } + welcomeMessageInputRef.current = el; + }} + value={welcomeMessage} + onChangeText={handleWelcomeMessageChange} + autoCapitalize="none" + textAlignVertical="top" + containerStyles={[styles.autoGrowHeightMultilineInput]} + /> + +
+
+ )} ); }