From 97fd105e0686415964201ca3e8d85e8366197543 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 25 Aug 2022 13:45:07 +0530
Subject: [PATCH] [TablePagination] Fix select variant not working  (#33974)

* add test cases

* apply Select variant if provided

* do not attach variant as an attribute to select root div

* update test

* test: parentNode -> parentElement

* fix visual regressions by allowing variant in inputProps

* add back variant standard

* add comment
---
 packages/mui-material/src/Select/Select.js    |  3 +-
 .../src/TablePagination/TablePagination.js    |  2 +-
 .../TablePagination/TablePagination.test.js   | 57 +++++++++++++++++++
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index bb319d638d9cc5..7e3b785a0fb8a9 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/packages/mui-material/src/Select/Select.js
@@ -114,7 +114,8 @@ const Select = React.forwardRef(function Select(inProps, ref) {
     ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
     ref: inputComponentRef,
     className: clsx(InputComponent.props.className, className),
-    variant,
+    // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
+    ...(!input && { variant }),
     ...other,
   });
 });
diff --git a/packages/mui-material/src/TablePagination/TablePagination.js b/packages/mui-material/src/TablePagination/TablePagination.js
index 041e575aac87af..cfb0b58b46fbeb 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.js
@@ -199,7 +199,7 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
         {rowsPerPageOptions.length > 1 && (
           <TablePaginationSelect
             variant="standard"
-            input={<InputBase />}
+            {...(!SelectProps.variant && { input: <InputBase /> })}
             value={rowsPerPage}
             onChange={onRowsPerPageChange}
             id={selectId}
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
index 7c9add1d4faa1d..fe413f19a3d3fb 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -7,6 +7,9 @@ import TableFooter from '@mui/material/TableFooter';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import TablePagination, { tablePaginationClasses as classes } from '@mui/material/TablePagination';
+import { inputClasses } from '@mui/material/Input';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { filledInputClasses } from '@mui/material/FilledInput';
 
 describe('<TablePagination />', () => {
   const noop = () => {};
@@ -399,6 +402,38 @@ describe('<TablePagination />', () => {
       const [combobox] = getAllByRole('button');
       expect(combobox).toHaveAccessibleName('Rows per page: 10');
     });
+
+    ['standard', 'outlined', 'filled'].forEach((variant) => {
+      it(`should be able to apply the ${variant} variant to select`, () => {
+        const { getAllByRole } = render(
+          <table>
+            <TableFooter>
+              <TableRow>
+                <TablePagination
+                  count={1}
+                  page={0}
+                  onPageChange={noop}
+                  onRowsPerPageChange={noop}
+                  rowsPerPage={10}
+                  SelectProps={{ variant }}
+                />
+              </TableRow>
+            </TableFooter>
+          </table>,
+        );
+
+        const [combobox] = getAllByRole('button');
+        const comboboxContainer = combobox.parentElement;
+
+        if (variant === 'standard') {
+          expect(comboboxContainer).to.have.class(inputClasses.root);
+        } else if (variant === 'outlined') {
+          expect(comboboxContainer).to.have.class(outlinedInputClasses.root);
+        } else if (variant === 'filled') {
+          expect(comboboxContainer).to.have.class(filledInputClasses.root);
+        }
+      });
+    });
   });
 
   describe('prop: rowsPerPage', () => {
@@ -447,4 +482,26 @@ describe('<TablePagination />', () => {
       );
     });
   });
+
+  it('should not have "variant" attribute on TablePaginationSelect', () => {
+    const { getAllByRole } = render(
+      <table>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              count={1}
+              page={0}
+              onPageChange={noop}
+              onRowsPerPageChange={noop}
+              rowsPerPage={10}
+            />
+          </TableRow>
+        </TableFooter>
+      </table>,
+    );
+
+    const [combobox] = getAllByRole('button');
+
+    expect(combobox.parentElement).not.to.have.attribute('variant');
+  });
 });