diff --git a/src/devtools/views/Components/Tree.js b/src/devtools/views/Components/Tree.js
index f26e9c7817..f8a5da8fc3 100644
--- a/src/devtools/views/Components/Tree.js
+++ b/src/devtools/views/Components/Tree.js
@@ -90,10 +90,11 @@ export default function Tree(props: Props) {
       // eslint-disable-next-line default-case
       switch (event.key) {
         case 'ArrowDown':
-          selectNextElementInTree();
           event.preventDefault();
+          selectNextElementInTree();
           break;
         case 'ArrowLeft':
+          event.preventDefault();
           element =
             selectedElementID !== null
               ? store.getElementByID(selectedElementID)
@@ -109,6 +110,7 @@ export default function Tree(props: Props) {
           }
           break;
         case 'ArrowRight':
+          event.preventDefault();
           element =
             selectedElementID !== null
               ? store.getElementByID(selectedElementID)
@@ -122,11 +124,10 @@ export default function Tree(props: Props) {
           } else {
             selectNextElementInTree();
           }
-          event.preventDefault();
           break;
         case 'ArrowUp':
-          selectPreviousElementInTree();
           event.preventDefault();
+          selectPreviousElementInTree();
           break;
       }
     };