This issue was reported by an Android User of the Cannabis website, and confirmed (by @jbum) using the BrowserStack tool on several Android devices, including
Samsung Galaxy S3 / 13 running Chrome
Google Pixel 7 v13 running Chrome
Google Pixel 7 v13 running Firefox
The bug affects the mobile search interface, but only appears to happen on Android, not on iOS devices.
The symptom: When the magnifying glass icon is pressed, the search-bar briefly appears, and then goes away immediately.
I have tracked down the cause of this bug to a resize() event handler that hides the search-bar (the resize handler fully resets the navigation bar, including hiding the search bar). On iOS devices, or small-sized desktop windows, pressing the search-icon does not cause a resize event to be issued, but on Android phones, a resize always gets issued when the search-bar is made visible (and yet another resize gets issued when the search-bar gets hidden by the previous resize event). The code that shows the search bar is
// reset mobile search on resize
window.addEventListener('resize', () => {
document
.querySelector('.search-container--small')
.classList.add('hidden-search');
...
Both of these excerpts are from index.js within the ds-site-navigation module.
I presume that the current resize() behavior was added for a reason. An ungainly but probably safe fix would be to detect, via a timestamp, when the resize-handler is called within a second-or-two of the click-handler, and return without resetting the interface in this situation. Alternately, we could check if the width of the browser is unchanged from the previous event, in which case the full-reset of the search interface is not necessary.
As far as I know, only the cannabis and drought websites are affected by this, but any non-ODI websites using this module would be affected.
A related, and less severe bug is that when the page is resized from desktop to mobile proportions, the mobile interface does not work at all -- it does not set up the initial click handler, apparently.
This issue was reported by an Android User of the Cannabis website, and confirmed (by @jbum) using the BrowserStack tool on several Android devices, including
The bug affects the mobile search interface, but only appears to happen on Android, not on iOS devices.
The symptom: When the magnifying glass icon is pressed, the search-bar briefly appears, and then goes away immediately.
I have tracked down the cause of this bug to a resize() event handler that hides the search-bar (the resize handler fully resets the navigation bar, including hiding the search bar). On iOS devices, or small-sized desktop windows, pressing the search-icon does not cause a resize event to be issued, but on Android phones, a resize always gets issued when the search-bar is made visible (and yet another resize gets issued when the search-bar gets hidden by the previous resize event). The code that shows the search bar is
...and the code that hides it on resize is...
Both of these excerpts are from index.js within the ds-site-navigation module.
I presume that the current resize() behavior was added for a reason. An ungainly but probably safe fix would be to detect, via a timestamp, when the resize-handler is called within a second-or-two of the click-handler, and return without resetting the interface in this situation. Alternately, we could check if the width of the browser is unchanged from the previous event, in which case the full-reset of the search interface is not necessary.
As far as I know, only the cannabis and drought websites are affected by this, but any non-ODI websites using this module would be affected.
A related, and less severe bug is that when the page is resized from desktop to mobile proportions, the mobile interface does not work at all -- it does not set up the initial click handler, apparently.