Fix autocomplete and select dropdown menu transparency issue in acrylic themes and WSO2 logo icon not visible#508
Merged
jeradrutnam merged 3 commits intowso2:mainfrom Mar 17, 2026
Merged
Conversation
WalkthroughThis pull request includes version bump metadata, linting comment additions, theme color adjustments for improved transparency and backdrop effects, and UI updates to the sample application including header branding and language selection component replacement. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can customize the high-level summary generated by CodeRabbit.Configure the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/oxygen-ui/src/styles/Themes/AcrylicBaseTheme.ts (1)
204-221: Consider extracting shared acrylic paper styles to avoid drift.
MuiPopover.paperandMuiAutocomplete.papernow duplicate the same style object; a shared helper would reduce maintenance overhead.♻️ Optional refactor
+const getAcrylicOverlayPaper = (theme: OxygenTheme) => ({ + backgroundColor: theme.vars!.palette.background.paper, + WebkitBackdropFilter: theme.blur.medium, + backdropFilter: theme.blur.medium, + backgroundImage: 'none', +}); ... MuiPopover: { styleOverrides: { - paper: ({ theme }: { theme: OxygenTheme }) => ({ - backgroundColor: theme.vars!.palette.background.paper, - WebkitBackdropFilter: theme.blur.medium, - backdropFilter: theme.blur.medium, - backgroundImage: 'none', - }) + paper: ({ theme }: { theme: OxygenTheme }) => getAcrylicOverlayPaper(theme), } }, MuiAutocomplete: { styleOverrides: { - paper: ({ theme }: { theme: OxygenTheme }) => ({ - backgroundColor: theme.vars!.palette.background.paper, - WebkitBackdropFilter: theme.blur.medium, - backdropFilter: theme.blur.medium, - backgroundImage: 'none', - }) + paper: ({ theme }: { theme: OxygenTheme }) => getAcrylicOverlayPaper(theme), } },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/oxygen-ui/src/styles/Themes/AcrylicBaseTheme.ts` around lines 204 - 221, Extract the duplicated acrylic paper style object used in MuiPopover.paper and MuiAutocomplete.paper into a single shared helper (e.g., acrylicPaperStyles or getAcrylicPaperStyles) inside AcrylicBaseTheme.ts and have both styleOverrides call that helper with the theme param; update the MuiPopover: { styleOverrides: { paper: ({ theme }: { theme: OxygenTheme }) => acrylicPaperStyles(theme) } } and MuiAutocomplete: { styleOverrides: { paper: ({ theme }: { theme: OxygenTheme }) => acrylicPaperStyles(theme) } } so the backgroundColor, WebkitBackdropFilter, backdropFilter and backgroundImage are defined in one place and reused to prevent drift.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@samples/oxygen-ui-test-app/src/pages/SettingsPage.tsx`:
- Around line 300-324: Extract the options array into a top-level constant
(e.g., LANGUAGE_OPTIONS) and use it for the Autocomplete's options prop; compute
the controlled value by finding the matching option object from LANGUAGE_OPTIONS
using appearanceSettings.language rather than creating an inline object; and add
an isOptionEqualToValue prop (e.g., (option, value) => option.value ===
value.value) to the Autocomplete so MUI can correctly match the selected value,
then keep the existing onChange to call setAppearanceSettings and handleChange.
---
Nitpick comments:
In `@packages/oxygen-ui/src/styles/Themes/AcrylicBaseTheme.ts`:
- Around line 204-221: Extract the duplicated acrylic paper style object used in
MuiPopover.paper and MuiAutocomplete.paper into a single shared helper (e.g.,
acrylicPaperStyles or getAcrylicPaperStyles) inside AcrylicBaseTheme.ts and have
both styleOverrides call that helper with the theme param; update the
MuiPopover: { styleOverrides: { paper: ({ theme }: { theme: OxygenTheme }) =>
acrylicPaperStyles(theme) } } and MuiAutocomplete: { styleOverrides: { paper: ({
theme }: { theme: OxygenTheme }) => acrylicPaperStyles(theme) } } so the
backgroundColor, WebkitBackdropFilter, backdropFilter and backgroundImage are
defined in one place and reused to prevent drift.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2b4e28d8-de0f-445e-b761-6a3f2050c2cd
⛔ Files ignored due to path filters (1)
packages/oxygen-ui-icons-react/icons/wso2.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
.changeset/strict-regions-judge.mdpackages/oxygen-ui-icons-react/scripts/build-icons.jspackages/oxygen-ui/src/styles/Themes/AcrylicBaseTheme.tssamples/oxygen-ui-test-app/src/layouts/AppLayout.tsxsamples/oxygen-ui-test-app/src/pages/SettingsPage.tsx
Comment on lines
+300
to
+324
| <Autocomplete | ||
| value={{ value: appearanceSettings.language, label: { | ||
| en: 'English', | ||
| es: 'Spanish', | ||
| fr: 'French', | ||
| de: 'German', | ||
| ja: 'Japanese', | ||
| zh: 'Chinese' | ||
| }[appearanceSettings.language] || 'English' }} | ||
| onChange={(_, newValue) => { | ||
| if (newValue) { | ||
| setAppearanceSettings({ ...appearanceSettings, language: newValue.value }) | ||
| handleChange() | ||
| } | ||
| }} | ||
| > | ||
| <MenuItem value="en">English</MenuItem> | ||
| <MenuItem value="es">Spanish</MenuItem> | ||
| <MenuItem value="fr">French</MenuItem> | ||
| <MenuItem value="de">German</MenuItem> | ||
| <MenuItem value="ja">Japanese</MenuItem> | ||
| <MenuItem value="zh">Chinese</MenuItem> | ||
| </Select> | ||
| options={[ | ||
| { value: 'en', label: 'English' }, | ||
| { value: 'es', label: 'Spanish' }, | ||
| { value: 'fr', label: 'French' }, | ||
| { value: 'de', label: 'German' }, | ||
| { value: 'ja', label: 'Japanese' }, | ||
| { value: 'zh', label: 'Chinese' } | ||
| ]} | ||
| renderInput={(params) => <TextField {...params} />} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -A35 -B5 '^\s*<Autocomplete' samples/oxygen-ui-test-app/src/pages/SettingsPage.tsx
rg -n 'isOptionEqualToValue' samples/oxygen-ui-test-app/src/pages/SettingsPage.tsxRepository: wso2/oxygen-ui
Length of output: 2009
🌐 Web query:
Material-UI Autocomplete isOptionEqualToValue object options required
💡 Result:
When Autocomplete options are objects, MUI’s default equality check is basically reference equality (option === value). If your controlled value comes from elsewhere (API, form state, re-created objects), it won’t be the same object instance as the one in options, so MUI can’t “match” it and may warn: “The value provided to Autocomplete is invalid…”. MUI recommends providing isOptionEqualToValue in this case. [1]
Use a stable key (typically an id) and also provide getOptionLabel:
<Autocomplete
options={users}
value={selectedUser} // should be a user object or null
getOptionLabel={(o) => o.name ?? ""} // must return a string
isOptionEqualToValue={(option, value) => option.id === value.id}
onChange={(_, v) => setSelectedUser(v)}
renderInput={(params) => <TextField {...params} label="User" />}
/>Notes:
- For “no selection”, set
value={null}(not"") to avoid the invalid-value warning. [2] - If you intend values that don’t exist in
options, considerfreeSolo. [1]
Sources: MUI Autocomplete docs [1], Stack Overflow discussion of the invalid-value warning and using null [2].
🏁 Script executed:
#!/bin/bash
# Check if getOptionLabel is used anywhere in this component
rg -n -B2 -A2 'getOptionLabel' samples/oxygen-ui-test-app/src/pages/SettingsPage.tsx
# Check the component structure to see if there are other similar Autocomplete instances
rg -n 'Autocomplete' samples/oxygen-ui-test-app/src/pages/SettingsPage.tsxRepository: wso2/oxygen-ui
Length of output: 114
Add isOptionEqualToValue and extract language options to prevent unstable value matching.
The value object is recreated on every render (inline object literal), and options array is also recreated on every render (inline array literal). Without isOptionEqualToValue, MUI's default reference equality check (===) will fail to match the value to any option, causing invalid-value warnings and unstable selection behavior.
Extract LANGUAGE_OPTIONS to a constant outside the component or render scope, find the matching option object for the controlled value, and provide isOptionEqualToValue to enable proper equality comparison:
Proposed fix
+const LANGUAGE_OPTIONS = [
+ { value: 'en', label: 'English' },
+ { value: 'es', label: 'Spanish' },
+ { value: 'fr', label: 'French' },
+ { value: 'de', label: 'German' },
+ { value: 'ja', label: 'Japanese' },
+ { value: 'zh', label: 'Chinese' },
+]
...
- <Autocomplete
- value={{ value: appearanceSettings.language, label: {
- en: 'English',
- es: 'Spanish',
- fr: 'French',
- de: 'German',
- ja: 'Japanese',
- zh: 'Chinese'
- }[appearanceSettings.language] || 'English' }}
+ <Autocomplete
+ value={
+ LANGUAGE_OPTIONS.find((opt) => opt.value === appearanceSettings.language)
+ ?? LANGUAGE_OPTIONS[0]
+ }
+ isOptionEqualToValue={(option, value) => option.value === value.value}
onChange={(_, newValue) => {
- if (newValue) {
- setAppearanceSettings({ ...appearanceSettings, language: newValue.value })
- handleChange()
- }
+ if (!newValue) return
+ setAppearanceSettings({ ...appearanceSettings, language: newValue.value })
+ handleChange()
}}
- options={[
- { value: 'en', label: 'English' },
- { value: 'es', label: 'Spanish' },
- { value: 'fr', label: 'French' },
- { value: 'de', label: 'German' },
- { value: 'ja', label: 'Japanese' },
- { value: 'zh', label: 'Chinese' }
- ]}
+ options={LANGUAGE_OPTIONS}
renderInput={(params) => <TextField {...params} />}
/>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@samples/oxygen-ui-test-app/src/pages/SettingsPage.tsx` around lines 300 -
324, Extract the options array into a top-level constant (e.g.,
LANGUAGE_OPTIONS) and use it for the Autocomplete's options prop; compute the
controlled value by finding the matching option object from LANGUAGE_OPTIONS
using appearanceSettings.language rather than creating an inline object; and add
an isOptionEqualToValue prop (e.g., (option, value) => option.value ===
value.value) to the Autocomplete so MUI can correctly match the selected value,
then keep the existing onChange to call setAppearanceSettings and handleChange.
brionmario
approved these changes
Mar 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request addresses UI consistency and branding improvements across the Oxygen UI packages and the sample app. The most significant changes include fixing dropdown menu backgrounds for better visual clarity, updating the WSO2 logo usage, and improving the language selector component for a more modern user experience.
UI Theme and Component Improvements:
Adjusted the
AcrylicBaseThemeinoxygen-uito use more transparent backgrounds forpaperandacrylicsurfaces, and updated theMuiPopoverand newMuiAutocompleteoverrides to ensure dropdown menus have consistent backgrounds and blur effects. This fixes the dropdown menu background issue. [1] [2] [3]Updated the language selector in the
SettingsPagesample to use theAutocompletecomponent instead ofSelect, providing a more modern and user-friendly dropdown. [1] [2]Branding and Icon Updates:
Updated the WSO2 logo icon usage in the sample app's footer and imports, ensuring consistent branding and improved visual presentation. [1] [2]
Changed the header title from "Developer" to "Console" for more accurate branding in the sample app.
Build and Logging Enhancements:
Release Notes:
Summary by CodeRabbit
Release Notes
Bug Fixes
New Features
Style