Olivero's: The header is showing odd behavior when the search bar is opened.

#3 Please review the patch

I haven't reviewed the code yet, but good catch on finding this bug!

Patch #3 failed to apply.

@mherchel As per my finding this issue is because when we click on the cross sign it's focusing and scrolling window vertically to top at same amount and as per header functionality when we reach to top or header it getting open again as per the functionality.

Code core/themes/olivero/js/scripts.es6.js:

// If header is pinned open and a header element gains focus, scroll to the
// top of the page to ensure that the header elements can be seen.
    document
      .querySelector('#site-header__inner')
      .addEventListener('focusin', () => {
        if (isDesktopNav() && !stickyHeaderIsEnabled()) {
          const header = document.querySelector('#header');
          const headerNav = header.querySelector('#header-nav');
          const headerMargin = header.clientHeight - headerNav.clientHeight;
          if (window.scrollY > headerMargin) {
            window.scrollTo(0, headerMargin);
          }
        }
      });

Maybe we can stop the window scroll on focus-in OR Please suggest here what we can do best to resolve this.

Thanks!

#8 Please verify the patch

#9 Recreated Patch

Verified and tested patch #9.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Appearance
# Apply Olivero theme
# Click on Hamberger menu -> Click on the search icon in the header
# scroll down to the bottom.
# click on the cross sign in the header to close the header
# User should not see header opened once click on the cross sign.

Looks good to me.
Can be a move to RTBC
Please refer attached screenshots for Before and After patch

Applied patch #9 and it works fine.

Before patch:

After patch:

Could someone test this with IE 11? Based on https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo, IE 11 doesn't support ScrollToOptions.

While trying to reproduce the problem, I noticed that the first and second steps were reversed. I updated the issue summary accordingly.

Specified the steps to include which cross sign to press.

I applied the patch and it only half fixed the issue. When the blue x button is clicked, the header is closed but the browser scrolled to the top.

Tried to apply the patch but gave some issue related to Java script , Below is the error I got on terminal when tried to apply the 3209871.9.patch on my local.

hence moving back to status: Needs Work

Error :
www-data@5cc8de3f7567:/app$ git apply -v 3209871.9.patch
Checking patch core/themes/olivero/js/scripts.es6.js...
error: while searching for:
const header = document.querySelector('#header');
const headerNav = header.querySelector('#header-nav');
const headerMargin = header.clientHeight - headerNav.clientHeight;
if (window.scrollY > headerMargin) {
window.scrollTo(0, headerMargin);
}
}
});
error: patch failed: core/themes/olivero/js/scripts.es6.js:155
error: core/themes/olivero/js/scripts.es6.js: patch does not apply
Checking patch core/themes/olivero/js/scripts.js...
error: while searching for:
var header = document.querySelector('#header');
var headerNav = header.querySelector('#header-nav');
var headerMargin = header.clientHeight - headerNav.clientHeight;

if (window.scrollY > headerMargin) {
window.scrollTo(0, headerMargin);
}
}
});
error: patch failed: core/themes/olivero/js/scripts.js:109
error: core/themes/olivero/js/scripts.js: patch does not apply

I don't see any problem to move it to NW if the patch can't be applied.
In fact the patch needs a re-roll and work must be done so @Agnesh Tank is right to change the status to NW.

New patch.

If the page is scrolled to the top when the menu is closed why it shouldn't be displayed?
If we want that the menu is not displayed the page should not be scrolled to the top when the menu is closed.
So I agree with @cassey.waldo that the patch fixes half of the problem and that is why the issue is with status NW.

Closing this in lieu of #3226785: Olivero: Wide search form should close on blur, which will resolve this issue.