From d63cc0da429efb4e8b51c8afcdb37f75a1b83c38 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sun, 17 Jun 2018 01:30:03 +0200
Subject: [PATCH] fix(ui): folder explorer: better performance + auto scroll to
 top

---
 .../@vue/cli-ui/src/components/FolderExplorer.vue   | 10 +++++++---
 .../cli-ui/src/components/FolderExplorerItem.vue    | 13 ++++++++-----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/@vue/cli-ui/src/components/FolderExplorer.vue b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
index 8d69f8d56..bf4fedc38 100644
--- a/packages/@vue/cli-ui/src/components/FolderExplorer.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorer.vue
@@ -88,13 +88,13 @@
       />
     </div>
 
-    <div class="folders">
+    <div ref="folders" class="folders">
       <template v-if="folderCurrent.children">
         <FolderExplorerItem
           v-for="folder of folderCurrent.children"
           :key="folder.name"
           :folder="folder"
-          @click.native="openFolder(folder.path)"
+          @select="openFolder(folder.path)"
         />
       </template>
     </div>
@@ -123,7 +123,11 @@ export default {
   apollo: {
     folderCurrent: {
       query: FOLDER_CURRENT,
-      fetchPolicy: 'network-only'
+      fetchPolicy: 'network-only',
+      async result () {
+        await this.$nextTick()
+        this.$refs.folders.scrollTop = 0
+      }
     },
 
     foldersFavorite: FOLDERS_FAVORITE
diff --git a/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue b/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
index aa396c519..64f1a8d21 100644
--- a/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
+++ b/packages/@vue/cli-ui/src/components/FolderExplorerItem.vue
@@ -1,10 +1,13 @@
-<template>
-  <div class="folder-explorer-item">
-    <VueIcon :icon="folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
+<template functional>
+  <div
+    class="folder-explorer-item"
+    @click="listeners.select()"
+  >
+    <VueIcon :icon="props.folder.isPackage ? 'folder' : 'folder_open'" class="folder-icon big"/>
     <div class="folder-name">
-      {{ folder.name }}
+      {{ props.folder.name }}
       <img
-        v-if="folder.isVueProject"
+        v-if="props.folder.isVueProject"
         class="vue-ui-project-icon"
         src="~@/assets/logo.png"
       >