search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
83 stars 23 forks source link

v2: Portaled elements don't use scoped theme by default #898

Closed mayank99 closed 1 year ago

mayank99 commented 1 year ago

Follow up to #813 which was added in #825. I was testing out the v2 branch and noticed that when a ComboBox is used inside a ThemeProvider deep inside the app tree, the dropdown menu (popover) doesn't inherit the theme and instead uses the default theme.

Code to reproduce ```tsx export default () => { return ( ); } const options = [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Lychee', value: 'lychee' }, ]; ```

I see two ways of fixing this:

  1. append the popover to the nearest scoped root by default. OR
  2. keep appending the popover to body, and create a duplicate scoped root around it.
mayank99 commented 1 year ago

This same issue also applies to modals and toast notifications which get created in a portal outside the scoped root.