Skip to content

[tablepagination] Add focus style to default InputBase used in Select - #48871

Open
silviuaavram wants to merge 4 commits into
mui:masterfrom
silviuaavram:fix/styled-select-focus-style
Open

[tablepagination] Add focus style to default InputBase used in Select#48871
silviuaavram wants to merge 4 commits into
mui:masterfrom
silviuaavram:fix/styled-select-focus-style

Conversation

@silviuaavram

@silviuaavram silviuaavram commented Jul 28, 2026

Copy link
Copy Markdown
Member

The control is focusable, so the focus style should be clearly visible. Since it's used in DataTable / TablePagination, it's high impact. Not changing anything related to InputBase or Select, since their focus style is expected.

Before After
Screenshot 2026-07-28 at 11 23 24 Screenshot 2026-07-28 at 11 23 11

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Reintroduces a visible focus treatment for the native <select> element used by NativeSelect (and consumers like TablePagination), addressing a regression where focus state became difficult to perceive.

Changes:

  • Adds a focus-state background color to StyledSelectSelect in NativeSelectInput.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/mui-material/src/NativeSelect/NativeSelectInput.js
@code-infra-dashboard

code-infra-dashboard Bot commented Jul 28, 2026

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-48871--material-ui.netlify.app/
QR code for https://deploy-preview-48871--material-ui.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/material 🔺+104B(+0.02%) 🔺+22B(+0.01%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/private-theming 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

packages/mui-material/src/NativeSelect/NativeSelectInput.js:42

  • The newly added &:focus background color isn’t covered by any existing tests for NativeSelectInput, so it could regress again without being caught. Consider adding a browser-only unit test (e.g. it.skipIf(isJsdom())) that focuses the rendered <select> and asserts the computed background-color matches theme.palette.action.focus (or theme.vars.palette.action.focus when using CSS vars).
  '&:focus': {
    backgroundColor: (theme.vars || theme).palette.action.focus,
    // Reset Chrome style
    borderRadius: 0,
  },

@ZeeshanTamboli ZeeshanTamboli left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@silviuaavram In the PR title and description you mention InputBase. Is it input or select component?

@silviuaavram silviuaavram changed the title [inputbase] Add back focus style in StyledSelectSelect [native select input] Add back focus style in StyledSelectSelect Jul 29, 2026
@silviuaavram

Copy link
Copy Markdown
Member Author

@silviuaavram In the PR title and description you mention InputBase. Is it input or select component?

corrected 👍🏽

@silviuaavram

Copy link
Copy Markdown
Member Author

Give me a second, I need to further test this one out.

@silviuaavram silviuaavram changed the title [native select input] Add back focus style in StyledSelectSelect [tablepagination] Add focus style to default InputBase used in Select Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: select Changes related to the select.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants