change: [M3-8817] - Replace PageSize autocomplete with simple select

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))

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.

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);

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"]');
   },
 };

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 ? (
-        <PageSizeSelectContainer data-qa-pagination-page-size>
-          <Autocomplete
-            disableClearable
+        <Box data-qa-pagination-page-size padding={0.5}>
+          <StyledTextField
+            SelectProps={{
+              MenuProps: {
+                disablePortal: true,
+              },
+            }}
+            defaultValue={defaultPagination}
+            hideLabel
             label="Number of items to show"
-            onChange={(_, selected) => handleSizeChange(selected.value)}
-            options={finalOptions}
-            textFieldProps={{ hideLabel: true, noMarginTop: true }}
-            value={defaultPagination}
-          />
-        </PageSizeSelectContainer>
+            onChange={(e) => handleSizeChange(Number(e.target.value))}
+            select
+            value={pageSize}
+          >
+            {finalOptions.map((option) => (
+              <MenuItem
+                data-qa-pagination-page-size-option={option.value}
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </MenuItem>
+            ))}
+          </StyledTextField>
+        </Box>
       ) : null}
     </Box>
   );
 };
 
-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',
   },
 }));