From c0d257dc8b46f408ed45ec3743e9e0e54299361a Mon Sep 17 00:00:00 2001 From: tienifr Date: Mon, 17 Jul 2023 14:28:16 +0700 Subject: [PATCH 1/2] BaseOptionSelector: add focus logic in componentDidUpdate --- .../OptionsSelector/BaseOptionsSelector.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 017359b34173..4d5dc6d9bce7 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {View} from 'react-native'; +import {View, InteractionManager} from 'react-native'; import Button from '../Button'; import FixedFooter from '../FixedFooter'; import OptionsList from '../OptionsList'; @@ -125,6 +125,16 @@ class BaseOptionsSelector extends Component { } componentDidUpdate(prevProps) { + if (this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) { + InteractionManager.runAfterInteractions(() => { + // Focus text input + if (!this.textInput) { + return; + } + this.textInput.focus(); + }); + } + if (_.isEqual(this.props.sections, prevProps.sections)) { return; } From a455a6fb91eda2c022c28efcbdd1d3a973fdbd4b Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 19 Jul 2023 11:11:46 +0700 Subject: [PATCH 2/2] fix: clean code --- src/components/OptionsSelector/BaseOptionsSelector.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 4d5dc6d9bce7..675b0f0572a9 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -125,12 +125,10 @@ class BaseOptionsSelector extends Component { } componentDidUpdate(prevProps) { - if (this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) { + if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) { InteractionManager.runAfterInteractions(() => { - // Focus text input - if (!this.textInput) { - return; - } + // If we automatically focus on a text input when mounting a component, + // let's automatically focus on it when the component updates as well (eg, when navigating back from a page) this.textInput.focus(); }); }