fix: up-down navigation in filtered-list (#663)

* fix up-down navigation in filtered-list

* fix: deselect current item when filtering history

* test: fix e2e

Author: UncleBill

cypress/integration/vuex.tab.js

@@ -29,16 +29,18 @@ suite('vuex tab', () => {
   it('should filter history', () => {
     cy.get('.left .search input').clear().type('inc')
     cy.get('.history .entry').should('have.length', 3)
-    cy.get('.history .entry.inspected').should('have.length', 0)
+    cy.get('.history .entry.inspected').should('have.length', 1)
     cy.get('.history .entry.active').should('have.length', 0)
 
     cy.get('.left .search input').clear().type('/dec/i')
     cy.get('.history .entry').should('have.length', 2)
-    cy.get('.history .entry.inspected.active').should('have.length', 1)
+    cy.get('.history .entry.inspected').should('have.length', 1)
+    cy.get('.history .entry.active').should('have.length', 0)
 
     cy.get('.left .search input').clear().type('/dec)/i')
     cy.get('.history .entry').should('have.length', 4)
-    cy.get('.history .entry.inspected.active').should('have.length', 1)
+    cy.get('.history .entry.inspected').should('have.length', 1)
+    cy.get('.history .entry.active').should('have.length', 1)
 
     cy.get('.left .search input').clear()
   })

src/devtools/views/events/EventsHistory.vue

@@ -52,9 +52,9 @@
           v-for="(event, index) in filteredEvents"
           ref="entries"
           :key="index"
-          :class="{ active: inspectedIndex === events.indexOf(event) }"
+          :class="{ active: inspectedIndex === filteredEvents.indexOf(event) }"
           class="entry list-item"
-          @click="inspect(events.indexOf(event))"
+          @click="inspect(filteredEvents.indexOf(event))"
         >
           <span class="event-name">{{ event.eventName }}</span>
           <span class="event-type">{{ event.type }}</span>
@@ -82,7 +82,7 @@ import Keyboard, {
   BACKSPACE
 } from '../../mixins/keyboard'
 import EntryList from '../../mixins/entry-list'
-import { mapState, mapGetters, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 import { classify, focusInput } from 'src/util'
 
 export default {
@@ -143,17 +143,21 @@ export default {
       },
       set (filter) {
         this.$store.commit('events/UPDATE_FILTER', filter)
+        this.$store.commit('events/INSPECT', -1)
       }
     }
   },
 
   methods: {
     ...mapMutations('events', {
-      inspect: 'INSPECT',
       reset: 'RESET',
       toggleRecording: 'TOGGLE'
     }),
 
+    ...mapActions('events', [
+      'inspect'
+    ]),
+
     displayComponentName (name) {
       return this.$shared.classifyComponents ? classify(name) : name
     }

src/devtools/views/events/module.js

@@ -25,8 +25,6 @@ const mutations = {
     state.inspectedIndex = -1
   },
   'INSPECT' (state, index) {
-    if (index < 0) index = 0
-    if (index >= state.events.length) index = state.events.length - 1
     state.inspectedIndex = index
   },
   'RESET_NEW_EVENT_COUNT' (state) {
@@ -45,8 +43,8 @@ const mutations = {
 }
 
 const getters = {
-  activeEvent: state => {
-    return state.events[state.inspectedIndex]
+  activeEvent: (state, getters) => {
+    return getters.filteredEvents[state.inspectedIndex]
   },
   filteredEvents: (state, getters, rootState) => {
     const classifyComponents = SharedData.classifyComponents
@@ -61,9 +59,18 @@ const getters = {
   }
 }
 
+const actions = {
+  inspect: ({ commit, getters }, index) => {
+    if (index < 0) index = 0
+    if (index >= getters.filteredEvents.length) index = getters.filteredEvents.length - 1
+    commit('INSPECT', index)
+  }
+}
+
 export default {
   namespaced: true,
   state,
   mutations,
-  getters
+  getters,
+  actions
 }

src/devtools/views/vuex/VuexHistory.vue

@@ -227,6 +227,7 @@ export default {
       },
       set (filter) {
         this.$store.dispatch('vuex/updateFilter', filter)
+        this.$store.commit('vuex/INSPECT', -1)
       }
     }
   },
@@ -244,11 +245,11 @@ export default {
     ]),
 
     isActive (entry) {
-      return this.activeIndex === this.history.indexOf(entry)
+      return this.activeIndex === this.filteredHistory.indexOf(entry)
     },
 
     isInspected (entry) {
-      return this.inspectedIndex === this.history.indexOf(entry)
+      return this.inspectedIndex === this.filteredHistory.indexOf(entry)
     }
   }
 }

src/devtools/views/vuex/actions.js

@@ -30,12 +30,12 @@ export function revert ({ commit, state }, entry) {
   }
 }
 
-export function inspect ({ commit, state }, entryOrIndex) {
+export function inspect ({ commit, getters }, entryOrIndex) {
   let index = typeof entryOrIndex === 'number'
     ? entryOrIndex
-    : state.history.indexOf(entryOrIndex)
+    : getters.filteredHistory.indexOf(entryOrIndex)
   if (index < -1) index = -1
-  if (index >= state.history.length) index = state.history.length - 1
+  if (index >= getters.filteredHistory.length) index = getters.filteredHistory.length - 1
   commit('INSPECT', index)
 }
 

src/devtools/views/vuex/module.js

@@ -91,8 +91,8 @@ function escapeStringForRegExp (str) {
 }
 
 const getters = {
-  inspectedState ({ base, history, inspectedIndex }) {
-    const entry = history[inspectedIndex]
+  inspectedState ({ base, inspectedIndex }, getters) {
+    const entry = getters.filteredHistory[inspectedIndex]
     const res = {}
 
     if (entry) {