[MM-22872] fix(messaging): DM list not scrolling when you press the up/down arrow keys (#29565)

* Set 'forwardRef' to 'true'

The Redux wrapper component not forwarding the ref to the parent resulted in the selected item ref being null.

* Add DM list test case

This test ensures the DM list scrolls items out of view into view when a user navigates using the Up and Down arrow keys.

* test(dm list): add zephyr test case number

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/messaging/dm_list_of_users_spec.js

@@ -80,4 +80,47 @@ describe('Messaging', () => {
                 and('contain', 'Deactivated');
         });
     });
+
+    it('MM-T5669 Navigating DM list using Up/Down arrow keys scrolls it', () => {
+        // # Login as test user and visit town-square
+        cy.apiLogin(testUser);
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+
+        // # Click on '+' sign to open DM modal
+        cy.uiAddDirectMessage().click().wait(TIMEOUTS.ONE_SEC);
+
+        // * Verify that the DM modal is open
+        cy.get('#moreDmModal').should('be.visible').contains('Direct Messages');
+
+        // # Check the DM list for the first user that's out of view.
+        cy.get('#multiSelectList').then((dmList) => {
+            const dmListBottom = dmList[0].getBoundingClientRect().bottom;
+
+            cy.get('#multiSelectList>div').each((listItem, index, listItems) => {
+                const itemBottom = listItem[0].getBoundingClientRect().bottom;
+
+                if (itemBottom > dmListBottom) {
+                    // # Press the DOWN arrow key to scroll down to the user out of view.
+                    for (let i = 0; i <= index; i++) {
+                        cy.get('#moreDmModal').trigger('keydown', {key: 'ArrowDown'});
+                    }
+
+                    // * Verify the active item (5th) is visible/scrolled into view.
+                    cy.wrap(listItem).should('be.visible');
+
+                    // # Press the UP arrow key to scroll back up to the first user that's now out of view.
+                    for (let i = 0; i <= index; i++) {
+                        cy.get('#moreDmModal').trigger('keydown', {key: 'ArrowUp'});
+                    }
+
+                    // * Verify the active item (1st) is visible/scrolled into view.
+                    cy.wrap(listItems[0]).should('be.visible');
+
+                    return false;
+                }
+
+                return listItems;
+            });
+        });
+    });
 });

webapp/channels/src/components/more_direct_channels/list_item/index.ts

@@ -15,4 +15,4 @@ function mapStateToProps(state: GlobalState) {
     };
 }
 
-export default connect(mapStateToProps)(ListItem);
+export default connect(mapStateToProps, null, null, {forwardRef: true})(ListItem);