From 4735412c91986918cd78251476e724858ca8b4f5 Mon Sep 17 00:00:00 2001 From: David Langley Date: Wed, 20 Aug 2025 17:09:44 +0100 Subject: [PATCH] Remove onSelectItem and space/enter handing from ListView (#30601) * Remove onSelectItem and space/enter handing from ListView(And therefore memberlist).) * remove unused imports * fix unit test --- src/components/utils/ListView.tsx | 14 ++------- .../memberlist/MemberListViewModel.tsx | 12 -------- .../views/rooms/MemberList/MemberListView.tsx | 16 +--------- .../components/views/utils/ListView-test.tsx | 29 ------------------- 4 files changed, 3 insertions(+), 68 deletions(-) diff --git a/src/components/utils/ListView.tsx b/src/components/utils/ListView.tsx index 585552e23a..5212d84b61 100644 --- a/src/components/utils/ListView.tsx +++ b/src/components/utils/ListView.tsx @@ -29,12 +29,6 @@ export interface IListViewProps */ items: Item[]; - /** - * Callback function called when an item is selected (via Enter/Space key). - * @param item - The selected item from the items array - */ - onSelectItem: (item: Item) => void; - /** * Function that renders each list item as a JSX element. * @param index - The index of the item in the list @@ -79,7 +73,7 @@ export interface IListViewProps */ export function ListView(props: IListViewProps): React.ReactElement { // Extract our custom props to avoid conflicts with Virtuoso props - const { items, onSelectItem, getItemComponent, isItemFocusable, getItemKey, context, ...virtuosoProps } = props; + const { items, getItemComponent, isItemFocusable, getItemKey, context, ...virtuosoProps } = props; /** Reference to the Virtuoso component for programmatic scrolling */ const virtuosoHandleRef = useRef(null); /** Reference to the DOM element containing the virtualized list */ @@ -186,10 +180,6 @@ export function ListView(props: IListViewProps(props: IListViewProps; @@ -113,7 +111,6 @@ export interface MemberListViewState { shouldShowSearch: boolean; isLoading: boolean; canInvite: boolean; - onClickMember: (member: RoomMember | ThreePIDInvite) => void; onInviteButtonClick: (ev: ButtonEvent) => void; } export function useMemberListViewModel(roomId: string): MemberListViewState { @@ -136,14 +133,6 @@ export function useMemberListViewModel(roomId: string): MemberListViewState { */ const [memberCount, setMemberCount] = useState(0); - const onClickMember = (member: RoomMember | ThreePIDInvite): void => { - dis.dispatch({ - action: Action.ViewUser, - member: member, - push: true, - }); - }; - const loadMembers = useMemo( () => throttle( @@ -278,7 +267,6 @@ export function useMemberListViewModel(roomId: string): MemberListViewState { isPresenceEnabled, isLoading, onInviteButtonClick, - onClickMember, shouldShowSearch: totalMemberCount >= 20, canInvite, }; diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx index fec82a68f2..198c1920ca 100644 --- a/src/components/views/rooms/MemberList/MemberListView.tsx +++ b/src/components/views/rooms/MemberList/MemberListView.tsx @@ -28,7 +28,7 @@ interface IProps { const MemberListView: React.FC = (props: IProps) => { const vm = useMemberListViewModel(props.roomId); - const { isPresenceEnabled, onClickMember, memberCount } = vm; + const { isPresenceEnabled, memberCount } = vm; const getItemKey = useCallback((item: MemberWithSeparator): string => { if (item === SEPARATOR) { @@ -80,19 +80,6 @@ const MemberListView: React.FC = (props: IProps) => { [isPresenceEnabled, getItemKey, memberCount], ); - const handleSelectItem = useCallback( - (item: MemberWithSeparator): void => { - if (item !== SEPARATOR) { - if (item.member) { - onClickMember(item.member); - } else { - onClickMember(item.threePidInvite); - } - } - }, - [onClickMember], - ); - const isItemFocusable = useCallback((item: MemberWithSeparator): boolean => { return item !== SEPARATOR; }, []); @@ -112,7 +99,6 @@ const MemberListView: React.FC = (props: IProps) => { { - const mockOnSelectItem = jest.fn(); const mockGetItemComponent = jest.fn(); const mockIsItemFocusable = jest.fn(); @@ -34,7 +33,6 @@ describe("ListView", () => { const defaultProps: IListViewProps = { items: defaultItems, - onSelectItem: mockOnSelectItem, getItemComponent: mockGetItemComponent, isItemFocusable: mockIsItemFocusable, getItemKey: (item) => (typeof item === "string" ? item : item.id), @@ -87,33 +85,6 @@ describe("ListView", () => { }); describe("Keyboard Navigation", () => { - it("should handle Enter key and call onSelectItem when focused", async () => { - renderListViewWithHeight(); - const container = screen.getByRole("grid"); - - expect(container.querySelectorAll(".mx_item")).toHaveLength(4); - - // Focus to activate the list and navigate to first focusable item - fireEvent.focus(container); - - fireEvent.keyDown(container, { code: "Enter" }); - - expect(mockOnSelectItem).toHaveBeenCalledWith(defaultItems[0]); - }); - - it("should handle Space key and call onSelectItem when focused", () => { - renderListViewWithHeight(); - const container = screen.getByRole("grid"); - - expect(container.querySelectorAll(".mx_item")).toHaveLength(4); - // Focus to activate the list and navigate to first focusable item - fireEvent.focus(container); - - fireEvent.keyDown(container, { code: "Space" }); - - expect(mockOnSelectItem).toHaveBeenCalledWith(defaultItems[0]); - }); - it("should handle ArrowDown key navigation", () => { renderListViewWithHeight(); const container = screen.getByRole("grid");