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

i323808 · 2024-03-25T10:27:50Z

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

shellbar_wizard_menu.mp4

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

I’m not disclosing any internal or sensitive information.

The text was updated successfully, but these errors were encountered:

Lukas742 · 2024-03-26T08:28:08Z

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 · 2024-03-26T08:57:24Z

Hi @Lukas742 ,

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

BR,
Jane

Lukas742 · 2024-03-26T12:34:42Z

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 · 2024-03-26T13:02:56Z

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 · 2024-05-07T08:09:30Z

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 · 2024-07-29T14:15:02Z

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 · 2024-08-01T07:19:05Z

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 · 2024-08-20T09:01:40Z

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 · 2024-09-11T00:27:25Z

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!

i323808 added the bug This issue is a bug in the code label Mar 25, 2024

Lukas742 closed this as completed Mar 26, 2024

Lukas742 added consulting and removed bug This issue is a bug in the code labels Mar 26, 2024

Lukas742 reopened this Mar 26, 2024

Lukas742 added bug This issue is a bug in the code SAP SF and removed consulting labels Mar 26, 2024

Lukas742 transferred this issue from SAP/ui5-webcomponents-react Mar 26, 2024

unazko self-assigned this Mar 26, 2024

unazko added the TOPIC RL label Mar 26, 2024

unazko added the Medium Prio label Mar 26, 2024

unazko removed their assignment Mar 26, 2024

MapTo0 self-assigned this Apr 30, 2024

MapTo0 removed their assignment May 7, 2024

nikoletavnv self-assigned this May 7, 2024

nikoletavnv removed their assignment May 13, 2024

MapTo0 self-assigned this Jul 29, 2024

MapTo0 added the author action label Jul 29, 2024

MapTo0 added TOPIC B and removed TOPIC RL labels Aug 20, 2024

hinzzx self-assigned this Aug 20, 2024

github-actions bot added the Stale label Sep 11, 2024

hristop removed author action Stale labels Sep 11, 2024

hinzzx linked a pull request Sep 11, 2024 that will close this issue

fix(ui5-menu): fix focus steal of ui5-wizard in mozilla #9845

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

i323808 commented Mar 25, 2024 •

edited

Loading

Lukas742 commented Mar 26, 2024

i323808 commented Mar 26, 2024

Lukas742 commented Mar 26, 2024

unazko commented Mar 26, 2024 •

edited

Loading

MapTo0 commented May 7, 2024

MapTo0 commented Jul 29, 2024

i323808 commented Aug 1, 2024

MapTo0 commented Aug 20, 2024 •

edited

Loading

github-actions bot commented Sep 11, 2024

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

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

Comments

i323808 commented Mar 25, 2024 • edited Loading

Describe the bug

Isolated Example

Reproduction steps

Expected Behaviour

Screenshots or Videos

UI5 Web Components for React Version

UI5 Web Components Version

Browser

Operating System

Additional Context

Relevant log output

Organization

Declaration

Lukas742 commented Mar 26, 2024

i323808 commented Mar 26, 2024

Lukas742 commented Mar 26, 2024

unazko commented Mar 26, 2024 • edited Loading

MapTo0 commented May 7, 2024

MapTo0 commented Jul 29, 2024

i323808 commented Aug 1, 2024

MapTo0 commented Aug 20, 2024 • edited Loading

github-actions bot commented Sep 11, 2024

i323808 commented Mar 25, 2024 •

edited

Loading

unazko commented Mar 26, 2024 •

edited

Loading

MapTo0 commented Aug 20, 2024 •

edited

Loading