Bug-3672: ProjectGroupPicker on select issue for non dashboard

components/ProjectGroupPicker.vue

@@ -2,6 +2,7 @@
   <div class="position-relative project-group-picker" ref="pickerRef" @focusout="onFocusOut">
     <input
       v-model="searchText"
+      :id="props.id"
       type="text"
       class="form-select"
       :disabled="props.disabled"
@@ -22,7 +23,7 @@
             Showing first {{ projectGroups.length }} of {{ totalCount }} project groups
             <span v-if="hasMore && !loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
           </template>
-          <template v-else-if="!hasMore">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
+          <template v-else-if="!showScrollHint">Showing all {{ projectGroups.length }} project group{{ projectGroups.length !== 1 ? 's' : '' }}</template>
           <template v-else>
             Showing first {{ projectGroups.length }} results
             <span v-if="!loading" class="pg-scroll-hint">&#183; Scroll to continue loading</span>
@@ -32,7 +33,7 @@
       </div>
       <div
         class="pg-list-wrap"
-        :class="{ 'pg-has-more': hasMore && !loading }"
+        :class="{ 'pg-has-more': showScrollHint && !loading }"
         ref="listRef"
         @scroll="onScroll"
       >
@@ -88,8 +89,9 @@ import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { tdeiUserClient } from '~/services/index'
 import type { TdeiProjectGroupItem } from '~/types/tdei'
 
-const props = withDefaults(defineProps<{ disabled?: boolean; options?: TdeiProjectGroupItem[] }>(), {
+const props = withDefaults(defineProps<{ id?: string; disabled?: boolean; options?: TdeiProjectGroupItem[]; rememberSelection?: boolean }>(), {
   disabled: false,
+  rememberSelection: false,
 })
 
 const model = defineModel({ required: true })
@@ -104,6 +106,7 @@ const listRef = ref<HTMLElement | null>(null)
 const activeIndex = ref(-1)
 
 const projectGroups = computed(() => props.options ?? fetchedGroups.value)
+const showScrollHint = computed(() => !props.options && hasMore.value)
 
 let pageNo = 1
 const hasMore = ref(true)
@@ -143,7 +146,9 @@ const loadGroups = async (reset = false) => {
     if (total !== undefined) totalCount.value = total
     fetchedGroups.value.push(...newGroups)
     const selected = newGroups.find(g => g.tdei_project_group_id === model.value)
-    if (selected) persistCachedName(selected.tdei_project_group_id, selected.name)
+    if (selected && props.rememberSelection) {
+      persistCachedName(selected.tdei_project_group_id, selected.name)
+    }
 
     if (newGroups.length < pageSize) {
       hasMore.value = false
@@ -204,7 +209,9 @@ const selectGroup = (id: string) => {
   if (pg) {
     searchText.value = pg.name
     selectedGroupName.value = pg.name
-    persistCachedName(pg.tdei_project_group_id, pg.name)
+    if (props.rememberSelection) {
+      persistCachedName(pg.tdei_project_group_id, pg.name)
+    }
   }
 }
 
@@ -295,7 +302,7 @@ watch(
   (groups) => {
     if (groups.length > 0) {
       const pgId = model.value as string | undefined
-      if (!pgId || !groups.some(pg => pg.tdei_project_group_id === pgId)) {
+      if (!pgId || (props.options && !groups.some(pg => pg.tdei_project_group_id === pgId))) {
         model.value = groups[0]?.tdei_project_group_id
       }
       const selected = groups.find(pg => pg.tdei_project_group_id === model.value)
@@ -310,7 +317,7 @@ watch(
 
 onMounted(async () => {
   // Show cached name immediately before the API call completes
-  if (model.value && loadCachedName(model.value as string)) {
+  if (props.rememberSelection && model.value && loadCachedName(model.value as string)) {
     applyCachedName()
   }
 
@@ -322,7 +329,7 @@ onMounted(async () => {
       if (selected) {
         searchText.value = selected.name
         selectedGroupName.value = selected.name
-      } else if (model.value && loadCachedName(model.value as string)) {
+      } else if (props.rememberSelection && model.value && loadCachedName(model.value as string)) {
         // Group is beyond page 1 — use the cached name for display
         applyCachedName()
       } else if (model.value) {

components/ServicePicker.vue

@@ -37,10 +37,11 @@ async function refreshServices() {
   services.value = (await tdeiUserClient.getMyServices(props.projectGroupId, props.serviceType))
     .sort((a, b) => a.name.localeCompare(b.name));
 
-  if (!model.value && services.length > 0) {
-    model.value = services[0].id
+  const selectedServiceStillExists = services.value.some(s => s.id === model.value)
+
+  if (!selectedServiceStillExists) {
+    model.value = services.value[0]?.id ?? null
   }
 }
 
 </script>
-

pages/dashboard.vue

@@ -4,7 +4,11 @@
         <h2 class="visually-hidden">My Workspaces</h2>
 
         <label for="ws_project_group_picker">Project Group</label>
-        <project-group-picker v-model="currentProjectGroup" id="ws_project_group_picker" />
+        <project-group-picker
+          id="ws_project_group_picker"
+          v-model="currentProjectGroup"
+          remember-selection
+        />
 
         <nuxt-link class="btn btn-primary flex-shrink-0" to="/workspace/create">
           <app-icon variant="add" size="24" />

pages/workspace/[id]/export/tdei.vue

@@ -62,13 +62,16 @@
               Dataset Name
               <input v-model.trim="datasetName" class="form-control" />
             </label>
-            <label class="d-block mt-3">
-              Project Group
+            <div class="mt-3">
+              <label class="d-block" for="export_tdei_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="export_tdei_project_group"
                 v-model="workspace.tdeiProjectGroupId"
                 :options="eligibleProjectGroups"
               />
-            </label>
+            </div>
             <label class="d-block mt-3">
               Service
               <service-picker
@@ -123,11 +126,13 @@ const exporter = new TdeiExporter(tdeiClient, osmClient, context);
 const route = useRoute();
 const workspaceId = Number(route.params.id);
 
-const [workspace, { items: myProjectGroups }] = await Promise.all([
+const [workspaceData, { items: myProjectGroups }] = await Promise.all([
   workspacesClient.getWorkspace(workspaceId),
   tdeiUserClient.getMyProjectGroups(1, '', 10000),
 ]);
 
+const workspace = reactive(workspaceData);
+
 const dataGeneratorRole = `${workspace.type}_data_generator`;
 const eligibleProjectGroups = myProjectGroups.filter(pg =>
   pg.roles.includes('poc') || pg.roles.includes(dataGeneratorRole),

pages/workspace/create/blank.vue

@@ -11,10 +11,15 @@
               <input v-model.trim="workspaceTitle" class="form-control" />
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
-              <project-group-picker v-model="projectGroupId" />
-            </label>
+            <div class="mb-3">
+              <label class="d-block" for="create_blank_project_group">
+                Project Group
+              </label>
+              <project-group-picker
+                id="create_blank_project_group"
+                v-model="projectGroupId"
+              />
+            </div>
 
             <div>Dataset Type</div>
             <dataset-type-radio v-model="datasetType" class="mb-3" />

pages/workspace/create/file.vue

@@ -16,14 +16,17 @@
               >
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
+            <div class="mb-3">
+              <label class="d-block" for="create_file_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="create_file_project_group"
                 v-model="projectGroupId"
                 :disabled="context.active"
                 required
               />
-            </label>
+            </div>
 
             <div>Dataset Type</div>
             <dataset-type-radio
@@ -109,4 +112,3 @@ async function create() {
   }
 }
 </script>
-

pages/workspace/create/tdei.vue

@@ -20,14 +20,17 @@
               >
             </label>
 
-            <label class="d-block mb-3">
-              Project Group
+            <div class="mb-3">
+              <label class="d-block" for="create_tdei_project_group">
+                Project Group
+              </label>
               <project-group-picker
+                id="create_tdei_project_group"
                 v-model="projectGroupId"
                 :disabled="context.active"
                 required
               />
-            </label>
+            </div>
 
             <label v-if="!$route.query.tdeiRecordId" class="d-block mb-3">
               Dataset