Repository: mui/material-ui (TypeScript)
Date: 2022-08-18 09:57:00+00:00
Task type: Bug Fix

Issue:
[TablePagination] select cannot be outlined
### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

When adding `SelectProps={{ variant: "outlined" }}` to TablePagination not all needed classes are applied and root div gets variant="outlined"
```
<div variant="outlined" class="MuiInputBase-root MuiInputBase-colorPrimary ...">
<div tabindex="0" role="button" aria-expanded="false" aria-haspopup="listbox" aria-labelledby=":r5: :r4:" id=":r4:" class="MuiSelect-select MuiTablePagination-select MuiSelect-outlined MuiInputBase-input ...">5</div>
<input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput" value="5">
...
</div>
```
Missing classes: MuiOutlinedInput-root, MuiOutlinedInput-input
Missing element: fieldset

An outline is not present on the page.

### Expected behavior 🤔

Adding outline variant should add all needed classes and elements. Select component on the page should be outlined.
```
<div variant="outlined" class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary ...">
<div tabindex="0" role="button" aria-expanded="false" aria-haspopup="listbox" aria-labelledby=":r5: :r4:" id=":r4:" class="MuiSelect-select MuiTablePagination-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input ...">5</div>
<input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput" value="5">
...
<fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline ...">...</fieldset>
</div>
```

### Steps to reproduce 🕹

Steps:

1. Open the link to CodeSandbox from some example that has "Rows per page" on https://mui.com/material-ui/react-table/
2. add `SelectProps={{ variant: "outlined" }}` to TablePagination
3. save and refresh the browser part
4. the outline is not added


### Context 🔦

The designer wants the select in the footer of the data grid to have a border. I can add the border by changing `selectRoot` but it is a select and select has outlined variant that we use in other places.

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 11.11 GB / 31.72 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 22.2.1 - C:\Python310\Scripts\pip3.EXE
  Utilities:
    Git: 2.37.1.
  IDEs:
    VSCode: 1.70.1 - C:\Users\alanj\AppData\Local\Programs\VS Code\bin\code.CMD
    Visual Studio: 16.11.32510.428 (Visual Studio Professional 2019)
  Languages:
    Bash: 5.0.17 - C:\Windows\system32\bash.EXE
    Python: 3.10.6
  Browsers:
    Chrome: 104.0.5112.81
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
    Internet Explorer: 11.0.19041.1566
  Monorepos:
    Yarn Workspaces: 1.22.19
    Lerna: 3.22.1
```
</details>

Browser: Brave v1.42.88


Issue discussion:
Thanks for the report! Looks like a bug.

Solution patch:
diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
--- 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
--- 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}


Test patch:
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
--- 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');
+  });
 });