Update settings search process after changing navigation

src/store/modules/settings.js

@@ -17,6 +17,7 @@ const settings = {
     instancePanel: '',
     loading: true,
     searchData: {},
+    searchQuery: '',
     settings: {},
     tabs: [],
     termsOfServices: '',
@@ -44,6 +45,9 @@ const settings = {
     SET_SEARCH: (state, searchObject) => {
       state.searchData = searchObject
     },
+    SET_SEARCH_QUERY: (state, query) => {
+      state.searchQuery = query
+    },
     SET_SETTINGS: (state, data) => {
       const newSettings = data.reduce((acc, { group, key, value }) => {
         const parsedValue = valueHasTuples(key, value)
@@ -131,7 +135,6 @@ const settings = {
         commit('SET_TABS', realResponse.tabs)
       } catch (_e) {
         commit('TOGGLE_TABS', true)
-        commit('SET_ACTIVE_TAB', 'relays')
         commit('SET_LOADING', false)
         return
       }
@@ -150,8 +153,8 @@ const settings = {
       commit('TOGGLE_REBOOT', response.data.need_reboot)
       commit('REMOVE_SETTING_FROM_UPDATED', { group, key, subkeys: subkeys || [] })
     },
-    SetActiveTab({ commit }, tab) {
-      commit('SET_ACTIVE_TAB', tab)
+    SetSearchQuery({ commit }, query) {
+      commit('SET_SEARCH_QUERY', query)
     },
     async SubmitChanges({ getters, commit, state }) {
       const configs = Object.keys(state.updatedSettings).reduce((acc, group) => {

src/views/settings/components/ActivityPub.vue

@@ -56,6 +56,9 @@ export default {
     loading() {
       return this.$store.state.settings.loading
     },
+    searchQuery() {
+      return this.$store.state.settings.searchQuery
+    },
     user() {
       return this.settings.description.find(setting => setting.key === ':user')
     },
@@ -63,6 +66,15 @@ export default {
       return _.get(this.settings.settings, [':pleroma', ':user']) || {}
     }
   },
+  mounted() {
+    if (this.searchQuery.length > 0) {
+      const selectedSetting = document.querySelector(`[data-search="${this.searchQuery}"]`)
+      if (selectedSetting) {
+        selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      }
+      this.$store.dispatch('SetSearchQuery', '')
+    }
+  },
   methods: {
     async onSubmit() {
       try {

src/views/settings/index.vue

@@ -146,15 +146,12 @@ export default {
     this.$store.dispatch('FetchSettings')
   },
   methods: {
-    async handleSearchSelect(selectedValue) {
+    handleSearchSelect(selectedValue) {
+      this.$store.dispatch('SetSearchQuery', selectedValue.key)
       const tab = Object.keys(this.tabs).find(tab => {
         return this.tabs[tab].settings.includes(selectedValue.group === ':pleroma' ? selectedValue.key : selectedValue.group)
       })
-      await this.$store.dispatch('SetActiveTab', tab)
-      const selectedSetting = document.querySelector(`[data-search="${selectedValue.key}"]`)
-      if (selectedSetting) {
-        selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
-      }
+      this.$router.push({ path: `/settings/${tab}` })
     },
     querySearch(queryString, cb) {
       const results = this.searchData.filter(searchObj => searchObj.search.find(el => el.includes(queryString.toLowerCase())))