diff --git a/src/presentation/Scripts/Cards/CardListItem.vue b/src/presentation/Scripts/Cards/CardListItem.vue
index ade633b5..bc4dacc6 100644
--- a/src/presentation/Scripts/Cards/CardListItem.vue
+++ b/src/presentation/Scripts/Cards/CardListItem.vue
@@ -4,20 +4,21 @@
v-bind:class="{
'is-collapsed': !isExpanded,
'is-inactive': activeCategoryId && activeCategoryId != categoryId,
- 'is-expanded': isExpanded}">
-
- {{cardTitle}}
- Oh no 😢
-
-
-
@@ -41,11 +42,18 @@ export default class CardListItem extends StatefulVue {
public onSelected(isExpanded: boolean) {
this.isExpanded = isExpanded;
}
-
@Watch('activeCategoryId')
public async onActiveCategoryChanged(value: |number) {
this.isExpanded = value === this.categoryId;
}
+ @Watch('isExpanded')
+ public async onExpansionChangedAsync(newValue: number, oldValue: number) {
+ if (!oldValue && newValue) {
+ await new Promise((r) => setTimeout(r, 400));
+ const focusElement = this.$refs.cardElement as HTMLElement;
+ (focusElement as HTMLElement).scrollIntoView({behavior: 'smooth'});
+ }
+ }
public async mounted() {
this.cardTitle = this.categoryId ? await this.getCardTitleAsync(this.categoryId) : undefined;