diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx index 08cf5805195585f6902bdd2ba02bada9c3dabf42..e71b3bf2a8cb272c0e0f61afc619006120da336c 100644 --- a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx +++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx @@ -20,7 +20,7 @@ import { useReactTable, OnChangeFn, } from '@tanstack/react-table'; -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { SortByHeader } from './SortByHeader'; import { DEFAULT_PAGE_SIZE } from './PublicationsTable.constants'; import { FilterBySubmapHeader } from './FilterBySubmapHeader/FilterBySubmapHeader.component'; @@ -88,6 +88,7 @@ export const PublicationsTable = ({ data }: PublicationsTableProps): JSX.Element const reduxPagination = useAppSelector(paginationSelector); const [pagination, setPagination] = useState(reduxPagination); + const tableRef = useRef<HTMLTableElement>(null); const onPaginationChange: OnChangeFn<PaginationState> = updater => { /** updating state this way is forced by table library */ @@ -106,8 +107,13 @@ export const PublicationsTable = ({ data }: PublicationsTableProps): JSX.Element }, modelId: selectedId, }), - ); - setPagination(nextState); + ) + .unwrap() + .then(() => { + setPagination(nextState); + + tableRef.current?.scrollIntoView(); + }); }; const table = useReactTable({ @@ -126,7 +132,7 @@ export const PublicationsTable = ({ data }: PublicationsTableProps): JSX.Element return ( <div className="flex max-h-full w-full flex-col items-center justify-center bg-white p-6"> <div className="w-full overflow-auto"> - <table className="w-full min-w-[1184px] table-auto overflow-auto text-sm"> + <table className="w-full min-w-[1184px] table-auto overflow-auto text-sm" ref={tableRef}> <thead className="sticky top-0 bg-white-pearl"> {table.getHeaderGroups().map(headerGroup => ( <tr key={headerGroup.id} className="border-y "> diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx index a006e829e5515fb7eb53d8bac0b397187ed4f2e7..211828b2599c579bccaeec9898495a92bdd8ad61 100644 --- a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx +++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx @@ -50,7 +50,7 @@ export const ProjectInfoDrawer = (): JSX.Element => { <ul className="list-disc pl-6 "> <li className="mt-2 text-hyperlink-blue"> <button type="button" onClick={onPublicationsClick} className="text-sm font-semibold"> - (21) publications + Publications </button> </li> <li className="mt-2 text-hyperlink-blue">