Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue with VisuallyHidden checkbox interactions in table #6334

Merged
merged 4 commits into from
Aug 17, 2021
Merged

Fix issue with VisuallyHidden checkbox interactions in table #6334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf2e163
resolve CHROME BUG
gwyneplaine Aug 16, 2021
0638578
Merge branch 'master' into paginated-items-bug
gwyneplaine Aug 17, 2021
b0c9af4
changeset
gwyneplaine Aug 17, 2021
c6f17a0
Merge branch 'paginated-items-bug' of https://github.com/keystonejs/k…
gwyneplaine Aug 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dirty-cheetahs-guess.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@keystone-next/keystone': patch
---

Resolved bug with visually hidden elements in ListView checkboxes expanding to fill the whole body on click of elements near the bottom of the screen.
5 changes: 2 additions & 3 deletions ...keystone/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,6 @@ const ListPage = ({ listKey }: ListPageProps) => {

const theme = useTheme();
const showCreate = !(metaQuery.data?.keystone.adminMeta.list?.hideCreate ?? true) || null;

return (
<PageContainer header={<ListPageHeader listKey={listKey} />}>
{metaQuery.error ? (
Expand Down Expand Up @@ -523,7 +522,6 @@ function ListTable({
const { query } = useRouter();
const shouldShowLinkIcon =
!list.fields[selectedFields.keys().next().value].views.Cell.supportsLinkTo;

return (
<Box paddingBottom="xlarge">
<TableContainer>
Expand Down Expand Up @@ -614,7 +612,7 @@ function ListTable({
minHeight: 38,
alignItems: 'center',
justifyContent: 'start',
// cursor: 'pointer',
position: 'relative',
}}
>
<CheckboxControl
Expand Down Expand Up @@ -742,6 +740,7 @@ const TableHeaderCell = (props: HTMLAttributes<HTMLElement>) => {
padding: spacing.small,
textAlign: 'left',
position: 'sticky',
zIndex: 1,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

zIndex manually applied on sticky thead element here to maintain the layering order of DOM elements withiin the table, as position: 'relative' on elements within tbody changes the zindex to be relative to the body

top: 0,
}}
{...props}
Expand Down