Duplicated the search , but only one works properly?

Question

I'm using magento 2 , and I duplicated the search block , cause I need one for the desktop version , and one for the mobile version , so basically when I go mobile , I hide the desktop one , and opposite on desktop. My problem is that when I go mobile and click on the magnifier icon , nothing pops up , cause it takes the other one(desktop one) to pop up , but that one is hided. What I need to do the get the mobile one to pop up ?

Answer 1

We found this a problem in other installs. It's generally due to a javascript call on the search form. If you're hiding one, the javascript is calling the first one in order, whether it's hidden or not. You're going to have to either use the same search form for both viewports, or replicate the javascript applicable to the search to work on either one. Usually by changing the id of the second on (e.g. search2) then using the duplicated javascript to call #seach2.

There are probably more elegant ways of addressing this, but the problem is that you're merely duplicating the search form rather than creating a new, unique instance.

You could also change the javascript call for the pop-up to activate on a class rather than and ID, too, using a class that is the same for both.