Skip to content

Commit a7f1d26

Browse files
pringelmannpringelmann
committed
fix: catch ctrl+f event to focus new search
-e Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
1 parent 1b7bde1 commit a7f1d26

7 files changed

Lines changed: 929 additions & 53 deletions

‎apps/settings/src/views/UserManagementNavigation.vue‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919

2020
<div class="account-management__search" role="search" :aria-label="t('settings', 'Search accounts and groups')">
2121
<NcInputField
22+
ref="searchField"
2223
v-model="searchInput"
2324
:label="t('settings', 'Search accounts and groups…')"
2425
:show-trailing-button="searchInput !== ''"
@@ -126,7 +127,7 @@
126127
import { mdiAccountOffOutline, mdiAccountOutline, mdiClose, mdiCogOutline, mdiHistory, mdiMagnify, mdiPlus, mdiShieldAccountOutline } from '@mdi/js'
127128
import { translate as t } from '@nextcloud/l10n'
128129
import debounce from 'debounce'
129-
import { computed, onBeforeUnmount, ref, watch } from 'vue'
130+
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
130131
import { useRoute } from 'vue-router/composables'
131132
import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
132133
import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
@@ -144,6 +145,7 @@ import { useStore } from '../store/index.js'
144145
const route = useRoute()
145146
const store = useStore()
146147
148+
const searchField = ref<InstanceType<typeof NcInputField>>()
147149
const searchInput = ref('')
148150
const commitSearch = debounce((query: string) => {
149151
store.commit('setSearchQuery', query)
@@ -156,6 +158,30 @@ function clearSearch() {
156158
}
157159
onBeforeUnmount(() => commitSearch.clear())
158160
161+
/**
162+
* Intercept Ctrl+F (Cmd+F on macOS) so it focuses the local search input
163+
* instead of opening the global unified search. We always stop propagation
164+
* to prevent the global handler from firing; preventDefault is skipped when
165+
* the field already has focus so a second Ctrl+F opens the browser's native
166+
* find-in-page dialog as an escape hatch.
167+
*
168+
* @param event - The keydown event
169+
*/
170+
function onKeyDown(event: KeyboardEvent) {
171+
if (!(event.ctrlKey || event.metaKey) || event.key !== 'f') {
172+
return
173+
}
174+
event.stopImmediatePropagation()
175+
const fieldEl = (searchField.value?.$el as HTMLElement | undefined) ?? null
176+
if (fieldEl?.contains(document.activeElement)) {
177+
return
178+
}
179+
event.preventDefault()
180+
searchField.value?.focus()
181+
}
182+
onMounted(() => window.addEventListener('keydown', onKeyDown, { capture: true }))
183+
onBeforeUnmount(() => window.removeEventListener('keydown', onKeyDown, { capture: true }))
184+
159185
/** State of the 'new-account' dialog */
160186
const isDialogOpen = ref(false)
161187

‎dist/core-public_share_auth.js‎

Lines changed: 852 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/core-public_share_auth.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/profile-main.css‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
/* extracted by css-entry-points-plugin */
2-
@import './profile-profile-main-65fj8xOs.chunk.css';
3-
@import './NcIconSvgWrapper-De-2-ukl-C_oBIsvc.chunk.css';
4-
@import './mdi-D7L4ZBkR.chunk.css';
5-
@import './NcModal-kyWZ3UFC-DgqchLjq.chunk.css';
6-
@import './Web-BYHcrfvW.chunk.css';
7-
@import './NcDialog-nDc1gW50-DYA_tnKg.chunk.css';
8-
@import './TrashCanOutline-Jq77EThs.chunk.css';
9-
@import './PencilOutline-DdQinVMt.chunk.css';
10-
@import './NcDateTime-DS-ziNw6.chunk.css';
11-
@import './NcContent-D69ktIEB-Di5xp43u.chunk.css';
12-
@import './NcUserStatusIcon-JWiuiAXe-Bq_6hmXG.chunk.css';
13-
@import './NcAvatar-ruClKRzS-CVm1ngoc.chunk.css';
14-
@import './NcEmptyContent-CDgWCt_m-DoZPzs7J.chunk.css';
15-
@import './NcCheckboxRadioSwitch-D0gFwEVl-CQwJiKOs.chunk.css';
16-
@import './NcSelect-B1uITk_3-B9mkBKAR.chunk.css';
17-
@import './NcInputField-CPL-a_MM-Bsffit-T.chunk.css';
18-
@import './index--M3XHucY.chunk.css';
2+
@import './profile-profile-main-DeO_zgfY.chunk.css';
3+
@import './NcIconSvgWrapper-De-2-ukl-N3OwSN9O.chunk.css';
4+
@import './ArrowRight-CCY9S6Db.chunk.css';
5+
@import './autolink-U5pBzLgI-DnbxQPLZ.chunk.css';
6+
@import './PencilOutline-CWUlo4XY.chunk.css';
7+
@import './NcDialog-nDc1gW50-BSV74Bru.chunk.css';
8+
@import './mdi-DZSuYX4-.chunk.css';
9+
@import './NcActionButton-BuRnYpJX-Bb0ihLdt.chunk.css';
10+
@import './NcDateTime-DRcCH7xq.chunk.css';
11+
@import './NcContent-D69ktIEB-CR8DxTO-.chunk.css';
12+
@import './NcUserStatusIcon-JWiuiAXe-B3aHoBAd.chunk.css';
13+
@import './NcAvatar-ruClKRzS-CeBxkemU.chunk.css';
14+
@import './NcEmptyContent-CDgWCt_m-CLjlZ-UT.chunk.css';
15+
@import './NcCheckboxRadioSwitch-D0gFwEVl-CZr77182.chunk.css';
16+
@import './NcSelect-B1uITk_3-DEY3FLux.chunk.css';
17+
@import './NcInputField-CPL-a_MM-DR0FULeu.chunk.css';
18+
@import './index-14eCE40q.chunk.css';

‎dist/profile-main.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/user_ldap-settings-admin.css‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
/* extracted by css-entry-points-plugin */
2-
@import './user_ldap-user_ldap-settings-admin-D-tJjQFp.chunk.css';
3-
@import './NcIconSvgWrapper-De-2-ukl-C_oBIsvc.chunk.css';
4-
@import './mdi-D7L4ZBkR.chunk.css';
5-
@import './NcModal-kyWZ3UFC-DgqchLjq.chunk.css';
6-
@import './PencilOutline-DdQinVMt.chunk.css';
7-
@import './Web-BYHcrfvW.chunk.css';
8-
@import './NcSelect-B1uITk_3-B9mkBKAR.chunk.css';
9-
@import './NcInputField-CPL-a_MM-Bsffit-T.chunk.css';
10-
@import './NcDialog-nDc1gW50-DYA_tnKg.chunk.css';
11-
@import './NcContent-D69ktIEB-Di5xp43u.chunk.css';
12-
@import './NcEmptyContent-CDgWCt_m-DoZPzs7J.chunk.css';
13-
@import './NcPasswordField-BOLzDHBJ-DxPSRxK-.chunk.css';
14-
@import './index-CtBAA7-7.chunk.css';
15-
@import './NcUserStatusIcon-JWiuiAXe-Bq_6hmXG.chunk.css';
16-
@import './NcDateTime-DS-ziNw6.chunk.css';
17-
@import './NcAvatar-ruClKRzS-CVm1ngoc.chunk.css';
18-
@import './NcTextArea-CseOD9aM-2PqDnzma.chunk.css';
19-
@import './NcActionSeparator-Ct2RnclR-pXJ_-D_I.chunk.css';
20-
@import './NcCheckboxRadioSwitch-D0gFwEVl-CQwJiKOs.chunk.css';
21-
@import './Plus-Som-mR4B.chunk.css';
22-
@import './index-Bwe91UZ7.chunk.css';
23-
@import './TrayArrowDown-D79n0IQ6.chunk.css';
24-
@import './index--xyrXnuf.chunk.css';
25-
@import './NcEmojiPicker-DGgqTnHp-ChsL0oK6.chunk.css';
26-
@import './index--M3XHucY.chunk.css';
27-
@import './NcGuestContent-j8ai4O1K-D0718NyY.chunk.css';
28-
@import './TrashCanOutline-Jq77EThs.chunk.css';
29-
@import './index-DK2nV6zf.chunk.css';
30-
@import './ContentCopy-D7mIRwIy.chunk.css';
31-
@import './NcUserBubble-BE6yD-R0-f2DD9EAL.chunk.css';
2+
@import './user_ldap-user_ldap-settings-admin-B0TK7Qgz.chunk.css';
3+
@import './NcIconSvgWrapper-De-2-ukl-N3OwSN9O.chunk.css';
4+
@import './ArrowRight-CCY9S6Db.chunk.css';
5+
@import './autolink-U5pBzLgI-DnbxQPLZ.chunk.css';
6+
@import './NcActionButton-BuRnYpJX-Bb0ihLdt.chunk.css';
7+
@import './PencilOutline-CWUlo4XY.chunk.css';
8+
@import './NcSelect-B1uITk_3-DEY3FLux.chunk.css';
9+
@import './NcInputField-CPL-a_MM-DR0FULeu.chunk.css';
10+
@import './NcDialog-nDc1gW50-BSV74Bru.chunk.css';
11+
@import './NcContent-D69ktIEB-CR8DxTO-.chunk.css';
12+
@import './NcEmptyContent-CDgWCt_m-CLjlZ-UT.chunk.css';
13+
@import './NcPasswordField-BOLzDHBJ-ftYon3Xm.chunk.css';
14+
@import './index-C-zybeEj.chunk.css';
15+
@import './NcUserStatusIcon-JWiuiAXe-B3aHoBAd.chunk.css';
16+
@import './NcDateTime-DRcCH7xq.chunk.css';
17+
@import './NcAvatar-ruClKRzS-CeBxkemU.chunk.css';
18+
@import './NcTextArea-CseOD9aM-cYH70pQY.chunk.css';
19+
@import './NcActionSeparator-Ct2RnclR-Ct2RnclR.chunk.css';
20+
@import './NcCheckboxRadioSwitch-D0gFwEVl-CZr77182.chunk.css';
21+
@import './Plus-DbSI4mFP.chunk.css';
22+
@import './index-CCanY5eB.chunk.css';
23+
@import './TrayArrowDown-DzNPKSuT.chunk.css';
24+
@import './index-HT1ZTE-Z.chunk.css';
25+
@import './NcEmojiPicker-DGgqTnHp-vNKR9S87.chunk.css';
26+
@import './index-14eCE40q.chunk.css';
27+
@import './NcGuestContent-j8ai4O1K-j8ai4O1K.chunk.css';
28+
@import './mdi-DZSuYX4-.chunk.css';
29+
@import './index-Do20Rmk1.chunk.css';
30+
@import './ContentCopy-f5rBJsKJ.chunk.css';
31+
@import './NcUserBubble-BE6yD-R0-DFUmBxeb.chunk.css';

‎dist/user_ldap-settings-admin.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)