MM-18790 Fix Keyboard Color Flash (#3380)

* 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:
CJ 2019-10-21 16:56:58 -04:00 committed by GitHub
parent 010c099654
commit e69b7c46ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

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}