in vendor\magento\module-search\view\frontend\web\js\form-mini.js
you have function setActiveState
in which you have:
this.searchForm.toggleClass('active', isActive);
this.searchLabel.toggleClass('active', isActive);
which add class to the label and form. If class and form has class active
they are shown. You have to override this function
EDIT:
How to override Js file:
create custom module under /app/code/[Vendor]/[Module]
. Our Vendor
name will be Override
and module name Js
. So first create file registration.php
in app/code/Override/Js
app/code/Override/Js/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Override_Js',
__DIR__
);
Then under app/code/Override/Js/etc
create file module.xml
.
app/code/Override/Js/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Override_Js" setup_version="0.0.1">
</module>
</config>
Next step is to create file requirejs-config.js
app/code/Override/Js/view/frontend/requirejs-config.js
var config = {
map: {
'*': {
'Magento_Search/js/form-mini':'Override_Js/js/form-mini'
}
}
};
Last thing to do is to creat your Js file. So create :
app/code/Override/Js/view/frontend/web/js/form-mini.js
with content from:
vendor\magento\module-search\view\frontend\web\js\form-mini.js
and make any changes you want.
After this run:
php bin/magento module:enable Override_Js
php bin/magento cachesetup:cleanupgrade
php bin/magento cache:flushclean
php bin/magento setupcache:upgradeflush
php bin/magento setup:di:compile
TIP: first put some alert('test');
in the _create: function () {
to see if requirejs works. If not follow this link