spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard
verified publisher icon adobe

[Bug]: sp-picker flicker issue when the sp-picker is rendered inside sp-popover which is triggered on sp-action-button click

Open shruti-nath opened this issue 10 months ago • 5 comments

Code of conduct

  • [x] I agree to follow this project's code of conduct.

Impacted component(s)

sp-picker, sp-popover, sp-action-button

Expected behavior

Upon clicking on the 'sp-action-button', the popover should be triggered with 2 sp-picker elements inside it.

Actual behavior

Upon click on sp-action-button, the popover gets triggered which contains 2 sp-picker elements inside it but it flickers in 2 ways:

  1. sometimes the popover which assigned 'top-end' placement keeps on moving to different positions while it is in open state.
  2. sometimes when the popover is open, the sp-pickers elements flickers, they appear and suddenly disappears.

This issue observed in Safari browser in Mac and all browsers in Windows.

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

  1. Open Safari in Mac.
  2. Go to 'https://stage.projectx.corp.adobe.com/'
  3. Click on 'Profile avatar'
  4. Select 'Features'
  5. Select 'hzwebcam-video-recording' and enable it.
  6. Click on Save
  7. Once page is reloaded, click on Document tab and then click on Document say presentation (except Drawing / Webpage).
  8. Once the editor page is loaded, add any image on the documents's current page.
  9. Click on 'Media' in the left navigation.
  10. Click on 'Video' sub tab.
  11. Click on 'Record yourself' button.
  12. A dialog opens.
  13. Now notice a 'Settings' icon, click on it.
  14. A popover opens which has 2 dropdowns for Camera & mic in it.
  15. Play with it and you'll notice that the sp-picker dropdowns flicker and disappear / re-appear.
  16. Sometime the popover changes its placement.
  17. Note this does not happen on all machines.

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 1

Logs taken while reproducing problem

N/A because inspecting suggests that the picker element is still present in the DOM when it disappears.

shruti-nath avatar Feb 06 '25 17:02 shruti-nath

@shruti-nath Can you reproduce this in webcomponents.dev so that we can abstract the issue?

najikahalsema avatar Feb 07 '25 18:02 najikahalsema

@Rajdeepc

najikahalsema avatar Feb 12 '25 15:02 najikahalsema

@shruti-nath Can you reproduce this in webcomponents.dev so that we can abstract the issue?

@najikahalsema : The exact issue is getting reproduced here. Try this out in Safari - https://studio.webcomponents.dev/edit/bAxHQqSHMHh9PkI2hnUQ/src/index.ts?p=stories

shruti-nath avatar Feb 12 '25 15:02 shruti-nath

PFA both the recordings (Safari browser) https://github.com/user-attachments/assets/bba4e03f-ed37-4030-8803-b46607945620

https://github.com/user-attachments/assets/661f1d12-0cf5-4159-bb55-e907b3dd0712

shruti-nath avatar Feb 14 '25 06:02 shruti-nath

SWC-784

Rajdeepc avatar Apr 02 '25 09:04 Rajdeepc

@shruti-nath Please update to the latest 1.7.0 and let me know if you are still seeing this issue. Tested in Safari 18.5 and it works fine. Attached video for reference. Link to demo: https://stackblitz.com/edit/vitejs-vite-qykge9l4?file=src%2Fmy-element.ts https://github.com/user-attachments/assets/089314ae-2251-4400-8135-5235a05fba1c

Rajdeepc avatar Jun 26 '25 08:06 Rajdeepc

Closing this ticket since it is verified in the latest release. Feel free to open it if you still see the issue happening on your end.

Rajdeepc avatar Jul 17 '25 05:07 Rajdeepc