[joy-ui][Autocomplete] Unable to change the border/outline color on focus
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Related page
https://mui.com/joy-ui/react-autocomplete/
Kind of issue
Other
Issue description
I don't believe its possible to change the outline/border color of an Autocomplete component when its clicked into. I'm able to change all other props by either overriding them or creating a new theme. But when selected, the border color will always default to the the main color of the palette (i.e. success: dark green, primary: blue etc...) I've tried overriding the palette in my themes.ts (tried every single prop), and I've even tried creating an entirely new theme. Both of these features work great, I'm able to customize the text color, background, etc... But the on focus border color seems unchangeable.
Context
I'd like to be able to customize the on focus border/outline color
Search keywords: Autocomplete, Border, Outline
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Joy UI Autocomplete documentation at https://mui.com/joy-ui/react-autocomplete/ and reproduce the focus-state styling described in the issue. Trace the component's theming and border/outline behavior to determine why the focus color ignores customization. Done means the focused Autocomplete border or outline color can be customized without breaking the other documented styling options.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100