fix(selection-list): highlight on lists with 1 section

src/components/Button/index.js

@@ -306,6 +306,7 @@ class Button extends Component {
  ]}
  nativeID={this.props.nativeID}
  accessibilityLabel={this.props.accessibilityLabel}
+ accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
  hoverDimmingValue={1}
  >
  {this.renderContent()}

src/components/SelectionList/BaseSelectionList.js

@@ -136,6 +136,9 @@ function BaseSelectionList({
  };
  }, [canSelectMultiple, sections]);
 
+ // Disable `Enter` hotkey if the active element is a button or checkbox
+ const shouldDisableHotkeys = activeElement && [CONST.ACCESSIBILITY_ROLE.BUTTON, CONST.ACCESSIBILITY_ROLE.CHECKBOX].includes(activeElement.role);
+
  // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
  const [focusedIndex, setFocusedIndex] = useState(() => _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey));
 
@@ -168,23 +171,35 @@ function BaseSelectionList({
  listRef.current.scrollToLocation({sectionIndex: adjustedSectionIndex, itemIndex, animated, viewOffset: variables.contentHeaderHeight});
  };
 
- const selectRow = (item, index) => {
+ /**
+ * Logic to run when a row is selected, either with click/press or keyboard hotkeys.
+ *
+ * @param {Object} item - the list item
+ * @param {Boolean} shouldUnfocusRow - flag to decide if we should unfocus all rows. True when selecting a row with click or press (not keyboard)
+ */
+ const selectRow = (item, shouldUnfocusRow = false) => {
  // In single-selection lists we don't care about updating the focused index, because the list is closed after selecting an item
  if (canSelectMultiple) {
- if (sections.length === 1) {
- // If the list has only 1 section (e.g. Workspace Members list), we always focus the next available item
- const nextAvailableIndex = _.findIndex(flattenedSections.allOptions, (option, i) => i > index && !option.isDisabled);
- setFocusedIndex(nextAvailableIndex);
- } else {
- // If the list has multiple sections (e.g. Workspace Invite list), we focus the first one after all the selected (selected items are always at the top)
+ if (sections.length > 1) {
+ // If the list has only 1 section (e.g. Workspace Members list), we do nothing.
+ // If the list has multiple sections (e.g. Workspace Invite list), and `shouldUnfocusRow` is false,
+ // we focus the first one after all the selected (selected items are always at the top).
  const selectedOptionsCount = item.isSelected ? flattenedSections.selectedOptions.length - 1 : flattenedSections.selectedOptions.length + 1;
- setFocusedIndex(selectedOptionsCount);
+
+ if (!shouldUnfocusRow) {
+ setFocusedIndex(selectedOptionsCount);
+ }
 
  if (!item.isSelected) {
  // If we're selecting an item, scroll to it's position at the top, so we can see it
  scrollToIndex(Math.max(selectedOptionsCount - 1, 0), true);
  }
  }
+
+ if (shouldUnfocusRow) {
+ // Unfocus all rows when selecting row with click/press
+ setFocusedIndex(-1);
+ }
  }
 
  onSelectRow(item);
@@ -197,7 +212,7 @@ function BaseSelectionList({
  return;
  }
 
- selectRow(focusedOption, focusedIndex);
+ selectRow(focusedOption);
  };
 
  /**
@@ -254,7 +269,7 @@ function BaseSelectionList({
  <UserListItem
  item={item}
  isFocused={isItemFocused}
- onSelectRow={() => selectRow(item, index)}
+ onSelectRow={() => selectRow(item, true)}
  onDismissError={onDismissError}
  showTooltip={showTooltip}
  />
@@ -266,7 +281,7 @@ function BaseSelectionList({
  item={item}
  isFocused={isItemFocused}
  isDisabled={isDisabled}
- onSelectRow={() => selectRow(item, index)}
+ onSelectRow={() => selectRow(item, true)}
  />
  );
  };
@@ -290,7 +305,7 @@ function BaseSelectionList({
  useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
  captureOnInputs: true,
  shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
- isActive: !activeElement && isFocused,
+ isActive: !shouldDisableHotkeys && isFocused,
  });
 
  /** Calls confirm action when pressing CTRL (CMD) + Enter */

src/components/SelectionList/RadioListItem.js

@@ -18,7 +18,6 @@ function RadioListItem({item, isFocused = false, isDisabled = false, onSelectRow
  accessibilityRole="button"
  hoverDimmingValue={1}
  hoverStyle={styles.hoveredComponentBG}
- focusStyle={styles.hoveredComponentBG}
  dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
  >
  <View style={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.optionRow, styles.userSelectNone, isFocused && styles.sidebarLinkActive]}>

src/components/SelectionList/UserListItem.js

@@ -62,7 +62,6 @@ function UserListItem({item, isFocused = false, showTooltip, onSelectRow, onDism
  accessibilityState={{checked: item.isSelected}}
  hoverDimmingValue={1}
  hoverStyle={styles.hoveredComponentBG}
- focusStyle={styles.hoveredComponentBG}
  dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
  >
  <View style={styles.checkboxPressable}>

src/hooks/useActiveElement/index.js

@@ -1,5 +1,11 @@
 import {useEffect, useState} from 'react';
 
+/**
+ * Listens for the focusin and focusout events and sets the DOM activeElement to the state.
+ * On native, we just return null.
+ *
+ * @return {Element} the active element in the DOM
+ */
 export default function useActiveElement() {
  const [active, setActive] = useState(document.activeElement);
 

src/hooks/useActiveElement/index.native.js

@@ -1,3 +1,8 @@
+/**
+ * Native doesn't have the DOM, so we just return null.
+ *
+ * @return {null}
+ */
 export default function useActiveElement() {
  return null;
 }