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')}
/>
);