Automated cherry pick of #3380 (#3453)

* MM-18790 Fix Keyboard Color Flash

Resolved the autoresponder keyboard flash by adding a 500ms delay to the keyboard focus, allowing for a smooth keyboard interaction without the color flash.

* MM-18790 Used CreateRef

Updated the reference to React.createRef

* Update app/screens/settings/notification_settings_auto_responder/notification_settings_auto_responder.js

Co-Authored-By: Elias Nahum <nahumhbl@gmail.com>

* MM-18790 Added check for current

Updated the focus check to validate current is truthy
This commit is contained in:
Mattermost Build 2019-10-22 16:10:22 +02:00 committed by Elias Nahum
parent 170721da9c
commit 10c9ff90ef

View file

@ -44,6 +44,8 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
const {intl} = this.context;
const notifyProps = getNotificationProps(currentUser);
this.autoresponderRef = React.createRef();
const autoResponderDefault = intl.formatMessage({
id: 'mobile.notification_settings.auto_responder.default_message',
defaultMessage: 'Hello, I am out of office and unable to respond to messages.',
@ -65,6 +67,16 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
this.saveUserNotifyProps();
}
componentDidMount() {
setTimeout(() => {
requestAnimationFrame(() => {
if (this.autoresponderRef.current) {
this.autoresponderRef.current.focus();
}
});
}, 500);
}
saveUserNotifyProps = () => {
this.props.onBack({
...this.state,
@ -126,8 +138,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
>
<View style={style.inputContainer}>
<TextInputWithLocalizedPlaceholder
autoFocus={true}
ref={this.keywordsRef}
ref={this.autoresponderRef}
value={autoResponderMessage}
blurOnSubmit={false}
onChangeText={this.onAutoResponseChangeText}