diff --git a/frontend/src/components/bucket/BucketChildConfig.vue b/frontend/src/components/bucket/BucketChildConfig.vue index e952e2f3..a5008c57 100644 --- a/frontend/src/components/bucket/BucketChildConfig.vue +++ b/frontend/src/components/bucket/BucketChildConfig.vue @@ -6,7 +6,8 @@ import { object, string } from 'yup'; import TextInput from '@/components/form/TextInput.vue'; import { Button, Dialog, Message, useToast } from '@/lib/primevue'; -import { useAuthStore, useBucketStore } from '@/store'; +import { useAuthStore, useBucketStore, useNavStore } from '@/store'; +import { onDialogHide } from '@/utils/utils'; import type { Ref } from 'vue'; import type { Bucket } from '@/types'; @@ -19,6 +20,7 @@ const props = defineProps<{ // Store const bucketStore = useBucketStore(); const { getUserId } = storeToRefs(useAuthStore()); +const { focusedElement } = storeToRefs(useNavStore()); // Form validation const validationMessages: Ref> = ref([]); @@ -34,6 +36,9 @@ const toast = useToast(); const dialogIsVisible: Ref = ref(false); const showDialog = (x: boolean) => { dialogIsVisible.value = x; + if (dialogIsVisible.value) { + focusedElement.value = document.activeElement; + } }; const onSubmit = async (values: any) => { @@ -64,32 +69,46 @@ const onCancel = () => { class="p-button-lg p-button-text" aria-label="Add subfolder" @click="showDialog(true)" - @keyup.enter="showDialog(true)" > - -

{{ props.parentBucket.bucketName }}

+

+ {{ props.parentBucket.bucketName }} +

  • Sets a subfolder to appear within a folder
{ but it can't be changed after it is set.
Folder levels are supported using '/' between levels (for example: 2024/January/my-documents).`" class="child-input" + focus-trap /> { placeholder="My Documents" help-text="Your custom display name for the subfolder - any name as you would like to see it listed in BCBox." class="child-input" - autofocus />