diff --git a/packages/manager/.changeset/pr-11203-changed-1731622084345.md b/packages/manager/.changeset/pr-11203-changed-1731622084345.md
new file mode 100644
index 00000000000..cadcc160879
--- /dev/null
+++ b/packages/manager/.changeset/pr-11203-changed-1731622084345.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Replace Pagination page size autocomplete with simple select ([#11203](https://github.com/linode/manager/pull/11203))
diff --git a/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts b/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts
index c38e5569a42..2f33d308bc2 100644
--- a/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts
+++ b/packages/manager/cypress/e2e/core/billing/billing-invoices.spec.ts
@@ -302,7 +302,9 @@ describe('Account invoices', () => {
cy.findByLabelText('Invoice Details').within(() => {
// Confirm that page size selection is set to "Show 25".
ui.pagination.findPageSizeSelect().click();
- ui.autocompletePopper.findByTitle('Show 25').should('be.visible').click();
+ cy.get('[data-qa-pagination-page-size-option="25"]')
+ .should('exist')
+ .click();
// Confirm that pagination controls list exactly 4 pages.
ui.pagination
@@ -337,9 +339,8 @@ describe('Account invoices', () => {
// Change pagination size selection from "Show 25" to "Show 100".
ui.pagination.findPageSizeSelect().click();
- ui.autocompletePopper
- .findByTitle('Show 100')
- .should('be.visible')
+ cy.get('[data-qa-pagination-page-size-option="100"]')
+ .should('exist')
.click();
// Confirm that all invoice items are listed.
diff --git a/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts b/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts
index 349f95198f1..4780133b78f 100644
--- a/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts
+++ b/packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts
@@ -276,8 +276,9 @@ describe('Billing Activity Feed', () => {
.within(() => {
// Confirm that pagination page size selection is set to "Show 25".
ui.pagination.findPageSizeSelect().click();
-
- ui.select.findItemByText('Show 25').should('be.visible').click();
+ cy.get('[data-qa-pagination-page-size-option="25"]')
+ .should('exist')
+ .click();
// Confirm that pagination controls list exactly 4 pages.
ui.pagination
@@ -309,8 +310,9 @@ describe('Billing Activity Feed', () => {
// Change page size selection from "Show 25" to "Show 100".
ui.pagination.findPageSizeSelect().click();
-
- ui.select.findItemByText('Show 100').should('be.visible').click();
+ cy.get('[data-qa-pagination-page-size-option="100"]')
+ .should('exist')
+ .click();
// Confirm that all 100 invoices are shown.
cy.get('tr').should('have.length', 101);
diff --git a/packages/manager/cypress/support/ui/pagination.ts b/packages/manager/cypress/support/ui/pagination.ts
index ffc5d349288..40493baebbd 100644
--- a/packages/manager/cypress/support/ui/pagination.ts
+++ b/packages/manager/cypress/support/ui/pagination.ts
@@ -12,23 +12,23 @@ export const pagination = {
},
/**
- * Finds the pagination page size selection.
+ * Finds the pagination page selection controls.
*
* @returns Cypress chainable.
*/
- findPageSizeSelect: () => {
- return pagination
- .find()
- .find('[data-qa-pagination-page-size]')
- .find('[data-qa-autocomplete]');
+ findControls: () => {
+ return pagination.find().find('[data-qa-pagination-controls]');
},
/**
- * Finds the pagination page selection controls.
+ * Finds the pagination page size selection.
*
* @returns Cypress chainable.
*/
- findControls: () => {
- return pagination.find().find('[data-qa-pagination-controls]');
+ findPageSizeSelect: () => {
+ return pagination
+ .find()
+ .find('[data-qa-pagination-page-size]')
+ .find('[role="combobox"]');
},
};
diff --git a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx
index eefa46d7d30..4440e4d22f5 100644
--- a/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx
+++ b/packages/manager/src/components/PaginationFooter/PaginationFooter.tsx
@@ -2,9 +2,10 @@ import { Box } from '@linode/ui';
import { styled, useTheme } from '@mui/material/styles';
import * as React from 'react';
-import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { MenuItem } from 'src/components/MenuItem';
import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { TextField } from '../TextField';
export const MIN_PAGE_SIZE = 25;
@@ -80,36 +81,58 @@ export const PaginationFooter = (props: Props) => {
/>
)}
{!fixedSize ? (
-
-
+ handleSizeChange(selected.value)}
- options={finalOptions}
- textFieldProps={{ hideLabel: true, noMarginTop: true }}
- value={defaultPagination}
- />
-
+ onChange={(e) => handleSizeChange(Number(e.target.value))}
+ select
+ value={pageSize}
+ >
+ {finalOptions.map((option) => (
+
+ ))}
+
+
) : null}
);
};
-const PageSizeSelectContainer = styled(Box, {
- label: 'PageSizeSelectContainer',
+const StyledTextField = styled(TextField, {
+ label: 'StyledTextField',
})(({ theme }) => ({
- '& .MuiInput-input': {
- paddingTop: 4,
- },
'& .MuiInput-root': {
- '&.Mui-focused': {
- boxShadow: 'none',
- },
backgroundColor: theme.bg.bgPaper,
+ border: '1px solid transparent',
+ },
+ '& .MuiList-root': {
+ border: `1px solid ${theme.palette.primary.main}`,
+ },
+ '& .MuiSelect-select': {
border: 'none',
},
- '& .react-select__value-container': {
- paddingLeft: 12,
+ '& .MuiSvgIcon-root': {
+ margin: 0,
+ padding: 0,
+ position: 'relative',
+ top: 0,
+ },
+ '&.Mui-focused': {
+ border: `1px dotted ${theme.color.grey1}`,
+ boxShadow: 'none',
},
}));