adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 12:42:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add focus trap to tag dropdown to fix focus management

Browse Source
This commit is contained in:
Gregor Vostrak
2025-03-05 11:57:26 +01:00
parent aa588196ee
commit d9ffa9899f
1 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/packages/ui/src/Tag/TagDropdown.vue
View File

@@ -6,6 +6,7 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
import MultiselectDropdownItem from '@/packages/ui/src/Input/MultiselectDropdownItem.vue'; import MultiselectDropdownItem from '@/packages/ui/src/Input/MultiselectDropdownItem.vue';
import type { Tag } from '@/packages/api/src'; import type { Tag } from '@/packages/api/src';
import type { Placement } from '@floating-ui/vue'; import type { Placement } from '@floating-ui/vue';
import {UseFocusTrap} from "@vueuse/integrations/useFocusTrap/component";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@@ -177,6 +178,9 @@ const showCreateTagModal = ref(false);
<slot name="trigger"></slot> <slot name="trigger"></slot>
</template> </template>
<template #content> <template #content>
<UseFocusTrap
v-if="open"
:options="{ immediate: true, allowOutsideClick: true }">
<input <input
ref="searchInput" ref="searchInput"
:value="searchValue" :value="searchValue"
@@ -217,6 +221,7 @@ const showCreateTagModal = ref(false);
<span>Create new Tag</span> <span>Create new Tag</span>
</button> </button>
</div> </div>
</UseFocusTrap>
</template> </template>
</Dropdown> </Dropdown>
</template> </template>