diff --git a/src/components/SelectionListRadio/BaseSelectionListRadio.js b/src/components/SelectionListRadio/BaseSelectionListRadio.js index 4daacb184ea1..c9e4c14d6b81 100644 --- a/src/components/SelectionListRadio/BaseSelectionListRadio.js +++ b/src/components/SelectionListRadio/BaseSelectionListRadio.js @@ -158,12 +158,14 @@ function BaseSelectionListRadio(props) { }; const renderItem = ({item, index, section}) => { - const isFocused = focusedIndex === index + lodashGet(section, 'indexOffset', 0); + const isDisabled = section.isDisabled; + const isFocused = !isDisabled && focusedIndex === index + lodashGet(section, 'indexOffset', 0); return ( ); diff --git a/src/components/SelectionListRadio/RadioListItem.js b/src/components/SelectionListRadio/RadioListItem.js index c5c4b3aeaf2c..615619f928f4 100644 --- a/src/components/SelectionListRadio/RadioListItem.js +++ b/src/components/SelectionListRadio/RadioListItem.js @@ -16,6 +16,9 @@ const propTypes = { /** Whether this item is focused (for arrow key controls) */ isFocused: PropTypes.bool, + /** Whether this item is disabled */ + isDisabled: PropTypes.bool, + /** Callback to fire when the item is pressed */ onSelectRow: PropTypes.func, }; @@ -23,6 +26,7 @@ const propTypes = { const defaultProps = { item: {}, isFocused: false, + isDisabled: false, onSelectRow: () => {}, }; @@ -30,11 +34,11 @@ function RadioListItem(props) { return ( props.onSelectRow(props.item)} + disabled={props.isDisabled} accessibilityLabel={props.item.text} accessibilityRole="button" hoverDimmingValue={1} hoverStyle={styles.hoveredComponentBG} - focusStyle={styles.hoveredComponentBG} > diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js index 8ca0320783d4..1bed325c435a 100644 --- a/src/pages/settings/Profile/TimezoneSelectPage.js +++ b/src/pages/settings/Profile/TimezoneSelectPage.js @@ -35,18 +35,18 @@ const getUserTimezone = (currentUserPersonalDetails) => lodashGet(currentUserPer function TimezoneSelectPage(props) { const {translate} = useLocalize(); - const timezone = useRef(getUserTimezone(props.currentUserPersonalDetails)); + const timezone = getUserTimezone(props.currentUserPersonalDetails); const allTimezones = useRef( _.chain(moment.tz.names()) .filter((tz) => !tz.startsWith('Etc/GMT')) .map((text) => ({ text, keyForList: getKey(text), - isSelected: text === timezone.current.selected, + isSelected: text === timezone.selected, })) .value(), ); - const [timezoneInputText, setTimezoneInputText] = useState(timezone.current.selected); + const [timezoneInputText, setTimezoneInputText] = useState(timezone.selected); const [timezoneOptions, setTimezoneOptions] = useState(allTimezones.current); /** @@ -76,8 +76,8 @@ function TimezoneSelectPage(props) { textInputValue={timezoneInputText} onChangeText={filterShownTimezones} onSelectRow={saveSelectedTimezone} - sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.current.automatic}]} - initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.current.selected)[0], 'keyForList')} + sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]} + initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')} /> );