Skip to content

Commit

Permalink
fix(NcAppNavigationSearch): Fix focus button on search clear
Browse files Browse the repository at this point in the history
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Jul 22, 2024
1 parent 7afe655 commit c8bfc59
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ const { focused: inputHasFocus } = useFocusWithin(inputElement)
const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100
/**
* @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
* @type {import('vue').Ref<HTMLDivElement>}
*/
const actionsContainer = ref()
const hasActions = () => !!slots.actions
Expand All @@ -205,13 +205,15 @@ const timeoutId = ref()
const hideActions = ref(false)
watch(inputHasFocus, () => {
showActions.value = !inputHasFocus.value
})
watch(showActions, (show) => {
window.clearTimeout(timeoutId.value)
if (showActions.value) {
if (show) {
hideActions.value = false
} else {
// If the transition is done, we fully hide the actions visually
window.setTimeout(() => {
hideActions.value = !showActions.value
hideActions.value = !show
}, transitionTimeout)
}
})
Expand All @@ -223,7 +225,7 @@ function onCloseSearch() {
emit('update:modelValue', '')
if (hasActions()) {
showActions.value = true
nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
nextTick(() => actionsContainer.value.querySelector('button')?.focus())
}
}
</script>
Expand Down

0 comments on commit c8bfc59

Please sign in to comment.