Typing in search input box makes page scroll

[cjyabraham]

When I type in the search input the page scrolls up. See vid

[thetwopct]

Reproducible in both Safari and Chrome on MacOS Not related to relative heights (i.e. use of VH) Not related to slick slider (can remove and still reproduce, can reproduce on all pages)

Deactivating Hubspot plugin seems to stop the issue

When activated the search form has data-hs-cf-bound="true" applied to the form, which is not from our code.

No mention of this issue on the WordPress plugin repo

Possible actions to take:

• Open support ticket with Hubspot WordPress plugin team
• Change name of form to see if its something kind of naming issue thats causing this?
• ?

[cjyabraham]

Perhaps there is some new conflict between our new theme and the HubSpot plugin. We had the HubSpot plugin activated on the old theme but it didn't cause this issue. For this reason I'm not sure opening a ticket with HubSpot will lead to much as they could point to many implementations that work fine. Is there something unique about the way this new search form is implemented? Maybe, as you suggest, the name of the form causes the conflict?

[thetwopct]

Nothing unique to this latest form, and looks like the old form you shared:

1) has the same name as the current form (so not a naming issue) 2) also has the same data-hs-cf-bound="true" applied

Other than that the forms are nearly identical, I can't imagine the slight differences are causing the issue, and the changes made were for W3C compliance.

If you don't want to raise an issue with HubSpot I suggest we close this ticket and mark as won't do as I have exhausted all testing without fix.

[cjyabraham]

This appears to solve the issue:

diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss
index e1576488..32fdcc1a 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss
@@ -377,7 +377,7 @@
                                padding-left: 0px;
                                padding-right: 0px;
                        }
-                       height: 80px;
+                       height: 98px;
                        display: flex;
                        width: 100%;
                        align-items: center;

It makes the search bar quite a big taller so not sure if it's an acceptable fix, however, it may provide some fresh insight into the problem. I've always thought this scrolling up behavior is the browser somehow thinking that the input box is partially hidden by some other element and so it tries to scroll to make it fully visible. By increase the height of div.header__search_container we're essentially moving the input box out to a clear space. I'll keep digging but wanted to share this point.

[cjyabraham]

This also solves it and is a bit better than the previous solution as it prevents scrolling when the form opens:

diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss
index e1576488..c58ff5af 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/core/_header.scss
@@ -358,6 +358,7 @@
                        right: 0;
                        background-color: rgba(#222222, 0.85);
                        transition: opacity 0.15s ease-in;
+                       padding: 1em 0;
                        &.is-active {
                                opacity: 1;
                                visibility: visible;

[cjyabraham]

Also to note: when I'm logged in to the admin this issue doesn't occur because the admin bar pushes the search bar down far enough so it's not in that danger zone...

[cjyabraham]

I have tried deactivating HubSpot but that does not solve the issue for me. Are you sure the issue just appeared solved because you were then logged in to the admin so had that admin bar pushing things down?