From 70861db1db45efdbbd6b1d4bddaa042b9461db87 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Fri, 15 Oct 2021 16:55:54 +0200
Subject: [PATCH] Fix table and cards layout scroll to top if page changes
 (#8826)

* Fix table and cards layout scroll to top if page changes

Fixes #8767

* Update cards.vue

* Update tabular.vue

Co-authored-by: Oreille <33065839+Oreilles@users.noreply.github.com>
---
 app/src/layouts/cards/cards.vue               |   9 +-
 app/src/layouts/cards/index.ts                |  11 +-
 app/src/layouts/tabular/index.ts              |  11 +-
 app/src/layouts/tabular/tabular.vue           |   9 +-
 .../components/docs-wrapper/docs-wrapper.vue  |   4 +-
 package-lock.json                             | 126 +++++++++---------
 6 files changed, 83 insertions(+), 87 deletions(-)

diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index 7e0fae88e0..1f2acc78f1 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -75,7 +75,7 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, watch, PropType, ref } from 'vue';
+import { defineComponent, watch, PropType, ref, inject, Ref } from 'vue';
 
 import Card from './components/card.vue';
 import CardsHeader from './components/header.vue';
@@ -214,10 +214,17 @@ export default defineComponent({
 		const sizeWritable = useSync(props, 'size', emit);
 		const sortWritable = useSync(props, 'sort', emit);
 
+		const mainElement = inject<Ref<Element | undefined>>('main-element');
+
 		const layoutElement = ref<HTMLElement>();
 
 		const { width } = useElementSize(layoutElement);
 
+		watch(
+			() => props.page,
+			() => mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' })
+		);
+
 		watch(width, () => {
 			emit('update:width', width.value);
 		});
diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index 35a8797387..0615649ed4 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -4,7 +4,7 @@ import CardsOptions from './options.vue';
 import CardsActions from './actions.vue';
 
 import { useI18n } from 'vue-i18n';
-import { toRefs, inject, computed, ref, watch } from 'vue';
+import { toRefs, computed, ref } from 'vue';
 import { useCollection } from '@directus/shared/composables';
 import { useItems } from '@directus/shared/composables';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
@@ -31,8 +31,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 
 		const relationsStore = useRelationsStore();
 
-		const mainElement = inject('main-element', ref<Element | null>(null));
-
 		const selection = useSync(props, 'selection', emit);
 		const layoutOptions = useSync(props, 'layoutOptions', emit);
 		const layoutQuery = useSync(props, 'layoutQuery', emit);
@@ -175,13 +173,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
 			const sort = syncRefProperty(layoutQuery, 'sort', defaultSort.value);
 
-			watch(
-				() => page.value,
-				() => {
-					mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' });
-				}
-			);
-
 			const fields = computed<string[]>(() => {
 				if (!primaryKeyField.value || !props.collection) return [];
 				const fields = [primaryKeyField.value.field];
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index 0d449707db..cf3aa988be 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -4,7 +4,7 @@ import TabularOptions from './options.vue';
 import TabularActions from './actions.vue';
 
 import { useI18n } from 'vue-i18n';
-import { ref, computed, inject, watch, toRefs } from 'vue';
+import { ref, computed, watch, toRefs } from 'vue';
 
 import { HeaderRaw, Item } from '@/components/v-table/types';
 import { Field } from '@directus/shared/types';
@@ -34,8 +34,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 
 		const router = useRouter();
 
-		const mainElement = inject('main-element', ref<Element | null>(null));
-
 		const selection = useSync(props, 'selection', emit);
 		const layoutOptions = useSync(props, 'layoutOptions', emit);
 		const layoutQuery = useSync(props, 'layoutQuery', emit);
@@ -160,13 +158,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				return adjustFieldsForDisplays(fields.value, props.collection);
 			});
 
-			watch(
-				() => page.value,
-				() => {
-					mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' });
-				}
-			);
-
 			return { sort, limit, page, fields, fieldsWithRelational };
 		}
 
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 4de390d128..a80e781517 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -81,7 +81,7 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { ComponentPublicInstance, defineComponent, PropType, ref } from 'vue';
+import { ComponentPublicInstance, defineComponent, PropType, ref, inject, Ref, watch } from 'vue';
 import { useSync } from '@directus/shared/composables';
 import useShortcut from '@/composables/use-shortcut';
 import { Field, Item, Collection, Filter } from '@directus/shared/types';
@@ -199,8 +199,15 @@ export default defineComponent({
 		const tableHeadersWritable = useSync(props, 'tableHeaders', emit);
 		const limitWritable = useSync(props, 'limit', emit);
 
+		const mainElement = inject<Ref<Element | undefined>>('main-element');
+
 		const table = ref<ComponentPublicInstance>();
 
+		watch(
+			() => props.page,
+			() => mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' })
+		);
+
 		useShortcut(
 			'meta+a',
 			() => {
diff --git a/app/src/views/private/components/docs-wrapper/docs-wrapper.vue b/app/src/views/private/components/docs-wrapper/docs-wrapper.vue
index 343bac53ce..74b78a1197 100644
--- a/app/src/views/private/components/docs-wrapper/docs-wrapper.vue
+++ b/app/src/views/private/components/docs-wrapper/docs-wrapper.vue
@@ -17,7 +17,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const route = useRoute();
 
-		const mainElement = inject<Ref<Element>>('main-element');
+		const mainElement = inject<Ref<Element | undefined>>('main-element');
 
 		const pageClass = computed(() => props.frontmatter?.pageClass);
 
@@ -31,7 +31,7 @@ export default defineComponent({
 		);
 
 		onMounted(() => {
-			if (route.hash && mainElement) {
+			if (route.hash && mainElement?.value) {
 				const linkedEl = document.querySelector(route.hash) as HTMLElement;
 
 				if (linkedEl) {
diff --git a/package-lock.json b/package-lock.json
index 2431364360..f04166def5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,19 +57,19 @@
 		},
 		"api": {
 			"name": "directus",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "GPL-3.0-only",
 			"dependencies": {
-				"@directus/app": "9.0.0-rc.96",
-				"@directus/drive": "9.0.0-rc.96",
-				"@directus/drive-azure": "9.0.0-rc.96",
-				"@directus/drive-gcs": "9.0.0-rc.96",
-				"@directus/drive-s3": "9.0.0-rc.96",
-				"@directus/extensions-sdk": "9.0.0-rc.96",
-				"@directus/format-title": "9.0.0-rc.96",
-				"@directus/schema": "9.0.0-rc.96",
-				"@directus/shared": "9.0.0-rc.96",
-				"@directus/specs": "9.0.0-rc.96",
+				"@directus/app": "9.0.0-rc.97",
+				"@directus/drive": "9.0.0-rc.97",
+				"@directus/drive-azure": "9.0.0-rc.97",
+				"@directus/drive-gcs": "9.0.0-rc.97",
+				"@directus/drive-s3": "9.0.0-rc.97",
+				"@directus/extensions-sdk": "9.0.0-rc.97",
+				"@directus/format-title": "9.0.0-rc.97",
+				"@directus/schema": "9.0.0-rc.97",
+				"@directus/shared": "9.0.0-rc.97",
+				"@directus/specs": "9.0.0-rc.97",
 				"@godaddy/terminus": "^4.9.0",
 				"@rollup/plugin-alias": "^3.1.2",
 				"@rollup/plugin-virtual": "^2.0.3",
@@ -316,12 +316,12 @@
 		},
 		"app": {
 			"name": "@directus/app",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"devDependencies": {
-				"@directus/docs": "9.0.0-rc.96",
-				"@directus/extensions-sdk": "9.0.0-rc.96",
-				"@directus/format-title": "9.0.0-rc.96",
-				"@directus/shared": "9.0.0-rc.96",
+				"@directus/docs": "9.0.0-rc.97",
+				"@directus/extensions-sdk": "9.0.0-rc.97",
+				"@directus/format-title": "9.0.0-rc.97",
+				"@directus/shared": "9.0.0-rc.97",
 				"@fullcalendar/core": "5.9.0",
 				"@fullcalendar/daygrid": "5.9.0",
 				"@fullcalendar/interaction": "5.9.0",
@@ -452,7 +452,7 @@
 		},
 		"docs": {
 			"name": "@directus/docs",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "ISC",
 			"devDependencies": {
 				"directory-tree": "3.0.0",
@@ -47629,11 +47629,11 @@
 		},
 		"packages/cli": {
 			"name": "@directus/cli",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
-				"@directus/format-title": "9.0.0-rc.96",
-				"@directus/sdk": "9.0.0-rc.96",
+				"@directus/format-title": "9.0.0-rc.97",
+				"@directus/sdk": "9.0.0-rc.97",
 				"@types/yargs": "^17.0.0",
 				"app-module-path": "^2.2.0",
 				"chalk": "^4.1.0",
@@ -47842,11 +47842,11 @@
 			}
 		},
 		"packages/create-directus-extension": {
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "GPL-3.0-only",
 			"dependencies": {
-				"@directus/extensions-sdk": "9.0.0-rc.96",
-				"@directus/shared": "9.0.0-rc.96",
+				"@directus/extensions-sdk": "9.0.0-rc.97",
+				"@directus/shared": "9.0.0-rc.97",
 				"inquirer": "^8.1.2"
 			},
 			"bin": {
@@ -47892,7 +47892,7 @@
 			"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
 		},
 		"packages/create-directus-project": {
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "GPL-3.0-only",
 			"dependencies": {
 				"chalk": "^4.1.1",
@@ -47930,7 +47930,7 @@
 		},
 		"packages/drive": {
 			"name": "@directus/drive",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
 				"fs-extra": "^10.0.0",
@@ -47949,11 +47949,11 @@
 		},
 		"packages/drive-azure": {
 			"name": "@directus/drive-azure",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
 				"@azure/storage-blob": "^12.6.0",
-				"@directus/drive": "9.0.0-rc.96",
+				"@directus/drive": "9.0.0-rc.97",
 				"normalize-path": "^3.0.0"
 			},
 			"devDependencies": {
@@ -47985,10 +47985,10 @@
 		},
 		"packages/drive-gcs": {
 			"name": "@directus/drive-gcs",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
-				"@directus/drive": "9.0.0-rc.96",
+				"@directus/drive": "9.0.0-rc.97",
 				"@google-cloud/storage": "^5.8.5",
 				"lodash": "4.17.21",
 				"normalize-path": "^3.0.0"
@@ -48008,10 +48008,10 @@
 		},
 		"packages/drive-s3": {
 			"name": "@directus/drive-s3",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
-				"@directus/drive": "9.0.0-rc.96",
+				"@directus/drive": "9.0.0-rc.97",
 				"aws-sdk": "^2.928.0",
 				"normalize-path": "^3.0.0"
 			},
@@ -48058,9 +48058,9 @@
 		},
 		"packages/extensions-sdk": {
 			"name": "@directus/extensions-sdk",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"dependencies": {
-				"@directus/shared": "9.0.0-rc.96",
+				"@directus/shared": "9.0.0-rc.97",
 				"@rollup/plugin-commonjs": "^21.0.0",
 				"@rollup/plugin-json": "^4.1.0",
 				"@rollup/plugin-node-resolve": "^13.0.0",
@@ -48112,7 +48112,7 @@
 		},
 		"packages/format-title": {
 			"name": "@directus/format-title",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"devDependencies": {
 				"@rollup/plugin-commonjs": "21.0.0",
@@ -48131,10 +48131,10 @@
 		},
 		"packages/gatsby-source-directus": {
 			"name": "@directus/gatsby-source-directus",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
-				"@directus/sdk": "9.0.0-rc.96",
+				"@directus/sdk": "9.0.0-rc.97",
 				"chalk": "4.1.2",
 				"gatsby-source-filesystem": "3.14.0",
 				"gatsby-source-graphql": "3.14.0",
@@ -48149,7 +48149,7 @@
 		},
 		"packages/schema": {
 			"name": "@directus/schema",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "GPL-3.0",
 			"dependencies": {
 				"knex-schema-inspector": "1.6.2",
@@ -48162,7 +48162,7 @@
 		},
 		"packages/sdk": {
 			"name": "@directus/sdk",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "MIT",
 			"dependencies": {
 				"axios": "^0.23.0"
@@ -48191,7 +48191,7 @@
 		},
 		"packages/shared": {
 			"name": "@directus/shared",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"dependencies": {
 				"axios": "*",
 				"date-fns": "2.24.0",
@@ -48253,7 +48253,7 @@
 		},
 		"packages/specs": {
 			"name": "@directus/specs",
-			"version": "9.0.0-rc.96",
+			"version": "9.0.0-rc.97",
 			"license": "GPL-3.0",
 			"dependencies": {
 				"openapi3-ts": "^2.0.1"
@@ -50133,10 +50133,10 @@
 		"@directus/app": {
 			"version": "file:app",
 			"requires": {
-				"@directus/docs": "9.0.0-rc.96",
-				"@directus/extensions-sdk": "9.0.0-rc.96",
-				"@directus/format-title": "9.0.0-rc.96",
-				"@directus/shared": "9.0.0-rc.96",
+				"@directus/docs": "9.0.0-rc.97",
+				"@directus/extensions-sdk": "9.0.0-rc.97",
+				"@directus/format-title": "9.0.0-rc.97",
+				"@directus/shared": "9.0.0-rc.97",
 				"@fullcalendar/core": "5.9.0",
 				"@fullcalendar/daygrid": "5.9.0",
 				"@fullcalendar/interaction": "5.9.0",
@@ -50245,8 +50245,8 @@
 		"@directus/cli": {
 			"version": "file:packages/cli",
 			"requires": {
-				"@directus/format-title": "9.0.0-rc.96",
-				"@directus/sdk": "9.0.0-rc.96",
+				"@directus/format-title": "9.0.0-rc.97",
+				"@directus/sdk": "9.0.0-rc.97",
 				"@types/figlet": "1.5.4",
 				"@types/fs-extra": "9.0.13",
 				"@types/jest": "27.0.2",
@@ -50540,7 +50540,7 @@
 			"version": "file:packages/drive-azure",
 			"requires": {
 				"@azure/storage-blob": "^12.6.0",
-				"@directus/drive": "9.0.0-rc.96",
+				"@directus/drive": "9.0.0-rc.97",
 				"@types/fs-extra": "9.0.13",
 				"@types/jest": "27.0.2",
 				"@types/node": "15.12.2",
@@ -50570,7 +50570,7 @@
 		"@directus/drive-gcs": {
 			"version": "file:packages/drive-gcs",
 			"requires": {
-				"@directus/drive": "9.0.0-rc.96",
+				"@directus/drive": "9.0.0-rc.97",
 				"@google-cloud/storage": "^5.8.5",
 				"@lukeed/uuid": "2.0.0",
 				"@types/fs-extra": "9.0.13",
@@ -50589,7 +50589,7 @@
 		"@directus/drive-s3": {
 			"version": "file:packages/drive-s3",
 			"requires": {
-				"@directus/drive": "9.0.0-rc.96",
+				"@directus/drive": "9.0.0-rc.97",
 				"@lukeed/uuid": "2.0.0",
 				"@types/fs-extra": "9.0.13",
 				"@types/jest": "27.0.2",
@@ -50621,7 +50621,7 @@
 		"@directus/extensions-sdk": {
 			"version": "file:packages/extensions-sdk",
 			"requires": {
-				"@directus/shared": "9.0.0-rc.96",
+				"@directus/shared": "9.0.0-rc.97",
 				"@rollup/plugin-commonjs": "^21.0.0",
 				"@rollup/plugin-json": "^4.1.0",
 				"@rollup/plugin-node-resolve": "^13.0.0",
@@ -50676,7 +50676,7 @@
 		"@directus/gatsby-source-directus": {
 			"version": "file:packages/gatsby-source-directus",
 			"requires": {
-				"@directus/sdk": "9.0.0-rc.96",
+				"@directus/sdk": "9.0.0-rc.97",
 				"chalk": "4.1.2",
 				"gatsby-source-filesystem": "3.14.0",
 				"gatsby-source-graphql": "3.14.0",
@@ -60280,8 +60280,8 @@
 		"create-directus-extension": {
 			"version": "file:packages/create-directus-extension",
 			"requires": {
-				"@directus/extensions-sdk": "9.0.0-rc.96",
-				"@directus/shared": "9.0.0-rc.96",
+				"@directus/extensions-sdk": "9.0.0-rc.97",
+				"@directus/shared": "9.0.0-rc.97",
 				"inquirer": "^8.1.2"
 			},
 			"dependencies": {
@@ -61372,16 +61372,16 @@
 		"directus": {
 			"version": "file:api",
 			"requires": {
-				"@directus/app": "9.0.0-rc.96",
-				"@directus/drive": "9.0.0-rc.96",
-				"@directus/drive-azure": "9.0.0-rc.96",
-				"@directus/drive-gcs": "9.0.0-rc.96",
-				"@directus/drive-s3": "9.0.0-rc.96",
-				"@directus/extensions-sdk": "9.0.0-rc.96",
-				"@directus/format-title": "9.0.0-rc.96",
-				"@directus/schema": "9.0.0-rc.96",
-				"@directus/shared": "9.0.0-rc.96",
-				"@directus/specs": "9.0.0-rc.96",
+				"@directus/app": "9.0.0-rc.97",
+				"@directus/drive": "9.0.0-rc.97",
+				"@directus/drive-azure": "9.0.0-rc.97",
+				"@directus/drive-gcs": "9.0.0-rc.97",
+				"@directus/drive-s3": "9.0.0-rc.97",
+				"@directus/extensions-sdk": "9.0.0-rc.97",
+				"@directus/format-title": "9.0.0-rc.97",
+				"@directus/schema": "9.0.0-rc.97",
+				"@directus/shared": "9.0.0-rc.97",
+				"@directus/specs": "9.0.0-rc.97",
 				"@godaddy/terminus": "^4.9.0",
 				"@keyv/redis": "^2.1.2",
 				"@rollup/plugin-alias": "^3.1.2",