diff --git a/e2e-tests/cypress/tests/integration/channels/messaging/dm_list_of_users_spec.js b/e2e-tests/cypress/tests/integration/channels/messaging/dm_list_of_users_spec.js
index 581e1a6d8e..e7b114f963 100644
--- a/e2e-tests/cypress/tests/integration/channels/messaging/dm_list_of_users_spec.js
+++ b/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;
+            });
+        });
+    });
 });
diff --git a/webapp/channels/src/components/more_direct_channels/list_item/index.ts b/webapp/channels/src/components/more_direct_channels/list_item/index.ts
index 3d762d3362..e81d34d560 100644
--- a/webapp/channels/src/components/more_direct_channels/list_item/index.ts
+++ b/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);