[SF][Wizard]: Wizard will scroll back to step 1 when open Menu popover(Firefox 124.0.1)

i323808 commented 5 months ago

Describe the bug

Wizard scrolls back to step 1 when open Menu popover in step 2 if there is a Shellbar component. This issue only can be reproduced using Firefox.

Isolated Example

No response

Reproduction steps

go to https://codesandbox.io/p/sandbox/shellbar-wizard-menu-zrqtii
click "Step2"
click "Open Action Sheet" button
the Wizard component scrolls back to Step1

Expected Behaviour

The wizard component should stay at Step2.

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/30744017/ff751703-d16f-48d2-8a55-99c8c7f6dcbf

UI5 Web Components for React Version

1.24.0

UI5 Web Components Version

1.21.0

Browser

Firefox

Operating System

macOS Sonoma 14.3.1

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

[X] I’m not disclosing any internal or sensitive information.

Lukas742 commented 5 months ago

Hi @i323808

we moved to StackBlitz as our preferred web IDE/sandbox as it's not possible anymore to edit codeSandboxes with a free plan.

It is not recommended mounting popovers or dialogs (see FAQs), like the Menu inside other components. Please either mount it outside, or use createPortal to render it outside of the Wizard.

Example: https://stackblitz.com/edit/github-bhutxp?file=src%2FApp.tsx

I'm going to close this issue now, if you still face issues after applying the recommended changes, please let us know.

i323808 commented 5 months ago

Hi @Lukas742 ,

This issue only can be reproduced when there is a ShellBarcomponent and using Firefox. Please refer to https://stackblitz.com/edit/github-bhutxp-vtln6m?file=src%2FApp.tsx .

BR, Jane

Lukas742 commented 5 months ago

Thank you @i323808 for pointing this out. Since this behavior also occurs without our wrapper or React, I'm going to forward this issue to the ui5-webcomponents repo, as the Wizard, ShellBar and Menu are all developed there.

Hi colleagues, here you can find an example without our wrapper or React. Additionally I moved the Menu outside of the component, but the behavior is still the same:

https://stackblitz.com/edit/js-7cztzr?file=index.html,index.js

unazko commented 5 months ago

Hello @SAP/ui5-webcomponents-topic-rl,

The issue is reproducible via the provided snippet in Firefox (Windows) as described by the author. This issue is not present in Chrome browser.

Best regards, Boyan

MapTo0 commented 4 months ago

The issue is fixed in 2.0, but it requires a fix for 1.x as well.

A few things I noticed while looking at the issue:

I could not reproduce the issue after replacing the ui5-menu with a ui5-responsive-popover, the problem might be in the menu itself
Check if this is a regression - I noticed a few changes related with focus behaviour of the popover, please git-bisect if you find a good commit an year back
To me this should not be an issue of the Wizard (we are just, could be in the menu. You can try replacing the wizard with other scrolling container and recheck if the issue appears?
- if it is not reproducible, start removing wizard step logic about scrolling, etc untill it basically become a scrolling div
- if it is reproducible forward to ui5-menu owners

MapTo0 commented 1 month ago

Hey @i323808

We have fixed that issue in the latest 2.0.1 release. Could you please recheck? Sample: https://stackblitz.com/edit/vitejs-vite-ttfxcw?file=style.css

I would like to ask if a fix in 2.xx is enough for you?

Best Regards! Martin

i323808 commented 1 month ago

Hi @MapTo0 ,

Thanks for updates. We won't upgrade UI5 to 2.x.x in next release(2411). Could you please downport the code fix to 1.24.x?

Thanks a million! Jane

MapTo0 commented 3 weeks ago

Dear @SAP/ui5-webcomponents-topic-b ,

This scrolling happens due to the rendering of an additional div element in the end of the template of the menu.

<div
    class="ui5-menu-submenus"
>
</div>

removing that part solves the issue. I think that somehow adding that steals the focus or makes the page to scroll up. As a solution I would propose wrapping all the template in a div with display: contents and check if the issue is still reproducible. If you have any questions feel free to contact me. Keep in mind that for optimal rendering, all elements in the template should be under a root element instead of have several root elements in the template.

Test page:

<body class="wizard_test1auto">
    <div style="height: 900px">
        <ui5-wizard>
            <ui5-wizard-step title-text="Step 1">
                <h1>Step 1</h1>
                <p>
                    Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
                    sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu
                    aliquet, feugiat massa semper, volutpat diam. Nam vitae ante
                    posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
                    tempor lorem. Mauris vitae elementum mi, sed eleifend ligula.
                    Nulla tempor vulputate dolor, nec dignissim quam convallis ut.
                    Praesent vitae commodo felis, ut iaculis felis. Fusce quis
                    eleifend sapien, eget facilisis nibh. Suspendisse est velit,
                    scelerisque ut commodo eget, dignissim quis metus. Cras faucibus
                    consequat gravida. Curabitur vitae quam felis. Phasellus ac leo
                    eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
                    Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
                    sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu
                    aliquet, feugiat massa semper, volutpat diam. Nam vitae ante
                    posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
                    tempor lorem. Mauris vitae elementum mi, sed eleifend ligula.
                    Nulla tempor vulputate dolor, nec dignissim quam convallis ut.
                    Praesent vitae commodo felis, ut iaculis felis. Fusce quis
                    eleifend sapien, eget facilisis nibh. Suspendisse est velit,
                    scelerisque ut commodo eget, dignissim quis metus. Cras faucibus
                    consequat gravida. Curabitur vitae quam felis. Phasellus ac leo
                    eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
                    Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
                    sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu
                    aliquet, feugiat massa semper, volutpat diam. Nam vitae ante
                    posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
                    tempor lorem. Mauris vitae elementum mi, sed eleifend ligula.
                    Nulla tempor vulputate dolor, nec dignissim quam convallis ut.
                    Praesent vitae commodo felis, ut iaculis felis. Fusce quis
                    eleifend sapien, eget facilisis nibh. Suspendisse est velit,
                    scelerisque ut commodo eget, dignissim quis metus. Cras faucibus
                    consequat gravida. Curabitur vitae quam felis. Phasellus ac leo
                    eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
                    Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
                    sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu
                    aliquet, feugiat massa semper, volutpat diam. Nam vitae ante
                    posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
                    tempor lorem. Mauris vitae elementum mi, sed eleifend ligula.
                    Nulla tempor vulputate dolor, nec dignissim quam convallis ut.
                    Praesent vitae commodo felis, ut iaculis felis. Fusce quis
                    eleifend sapien, eget facilisis nibh. Suspendisse est velit,
                    scelerisque ut commodo eget, dignissim quis metus. Cras faucibus
                    consequat gravida. Curabitur vitae quam felis. Phasellus ac leo
                    eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
                    Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
                    sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu
                    aliquet, feugiat massa semper, volutpat diam. Nam vitae ante
                    posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend
                    tempor lorem. Mauris vitae elementum mi, sed eleifend ligula.
                    Nulla tempor vulputate dolor, nec dignissim quam convallis ut.
                    Praesent vitae commodo felis, ut iaculis felis. Fusce quis
                    eleifend sapien, eget facilisis nibh. Suspendisse est velit,
                    scelerisque ut commodo eget, dignissim quis metus. Cras faucibus
                    consequat gravida. Curabitur vitae quam felis. Phasellus ac leo
                    eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
                </p>
            </ui5-wizard-step>
            <ui5-wizard-step title-text="Step 2">
                <h1>Step 2</h1>
                <ui5-button id="openMenuBtn">Open Menu</ui5-button>
                <ui5-menu opener="openMenuBtn" id="menu">
                    <ui5-menu-item text="Item1"></ui5-menu-item>
                </ui5-menu>
            </ui5-wizard-step>
        </ui5-wizard>
    </div>

    <script>
        const opener = document.getElementById('openMenuBtn');
        const menu = document.getElementById('menu');

        opener.addEventListener('click', () => {
            menu.setAttribute('open', 'open');
        });
    </script>
</body>

github-actions[bot] commented 4 days ago

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

SAP / ui5-webcomponents