search

iTwin / appui

Monorepo for iTwin.js AppUi
MIT License
8 stars 2 forks source link

Preview popout reparent: iTwinUI ProgressRadial shows "Loading" text when popped out #892

Open Juliakas opened 2 weeks ago

Juliakas commented 2 weeks ago

Describe the bug

When ProgressRadial is popped out, it's shadow dom loses it's styling and "Loading" text is being displayed even though it was supposed to be hidden: image

This doesn't happen when component is rendered initially in new window, only when transition from main to new window is happening and widget dom is being moved.

I reproduced everything on appui storybook (on release/4.15.0 tag) by changing widget content to ProgressRadial in ReparentPopoutWidgets.tsx file.

To Reproduce

  1. Have a widget with ProgressRadial spinner.
  2. Pop out widget.
  3. Notice "Loading" text being shown inside spinner.

Expected Behavior

Expected for loading text to remain hidden when transitioning.

Screenshots

image

Desktop (please complete the applicable information)

OS: Windows 11 Browser: Microsoft Edge Browser version: Version 126.0.2592.68 (Official build) (64-bit) Appui version: 4.15.0 (reproduced on source)

Additional context

Would need this fixed before our Modeler's release, our feature freeze is at beggining of next month. At worst we would need a workaround or to opt out of iTwinUI's accessibility shadow dom usage

mayank99 commented 1 week ago

Is this a bug in iTwinUI or in AppUI? If it's in iTwinUI, it'd be helpful to see a minimal repro.

Juliakas commented 1 week ago

Interaction bug, so I guess both until determined :D

There is a lot of appui logic involved for this, not very feasible to make iTwinUI sandbox - when popping out React state is intact, dom gets reparented instead. I reproduced it in appui storybook at my local build by just putting a spinner in widget with preview popout feature. Didn't figure out permissions to push branch

mayank99 commented 1 week ago

I just tested that ProgressRadial works fine when rendering in a popout window.

So the issue is probably in AppUI's reparenting logic. I guess it makes sense that if you're forcing the state to be preserved, it's not going to re-add its internal styles in the new window. We might need to detect if the component is moved to a new window and re-run that logic.

Juliakas commented 1 week ago

Yeah so on initial render in appui's popout it also works fine. The issue happens when transferring dom, it doesn't copy over shadow dom styles somehow