How to remove disable attribute from a button in form-mini

Question

I'm trying to remove disable from a button in form-mini.phtml but couldn't find a way through jquery/javascript. I know it gets enabled after adding a few characters, but by default, it remains disabled.

As I'm creating my own theme from scratch, I want that disabled attribute to be removed at all times for now.

<button
   type="submit"
   title="<?= $escaper->escapeHtml(__('Search')) ?>"
   class="action search"
   aria-label="Search"
>
   <span><?= $escaper->escapeHtml(__('Search')) ?></span>
/button>

I tried by $('.action.search').removeAttr("disabled") and $('.action.search').prop('disabled', false) but couldn't find any luck.

When I removed type="submit" from the button, the disabled removed as well. And I got an error TypeError: Cannot set properties of undefined (setting 'disabled') from Magento. So I guess it's somehow connected to type="submit".

I was wondering if there is a way to manipulate the javascript of form-mini.phtml as well or what would be the better way to achieve this.

Please, any help would be appreciated.

Answer 1

As you can see, the disabled attribute from the search button (after page loaded) does not exists in vendor/magento/module-search/view/frontend/templates/form.mini.phtml.

The code adding the disable attribute to the search button located in JS file: vendor/magento/module-search/view/frontend/web/js/form-mini.js

There are 2 places set the disable attribute to true that will add the disable attribute to the search button:

• in _create function
• in _onPropertyChange function

To remove the disable attribute from the search button in form-mini you have to set the disable attribute to false. To achieve this, the best way is extending form-mini.js by using a mixin in a custom module:

Step 1: Create the requirejs-config.js in your custom module, file path is app/code/VendorName/ModuleName/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Search/js/form-mini': {
                'VendorName_ModuleName/js/form-mini-mixin': true
            }
        }
    }
};

Step 2: Create the form-mini minxin file:

define(['jquery'], function ($) {
    'use strict';

    var quickSearchWidgetMixin = {
        /** @inheritdoc */
        _create: function () {
            this._super();
            this.submitBtn.disabled = false; // Customize to remove the disabled attribute
        },

        /** @inheritdoc */
        _onPropertyChange: function () {
            this._super();
            this.submitBtn.disabled = false; // Customize to remove the disabled attribute
        }
    };

    return function (targetWidget) {
        $.widget('mage.quickSearch', targetWidget, quickSearchWidgetMixin);

        return $.mage.quickSearch;
    };
});

Step 3: Run the following commands to re-deploy static content:

rm -rf var/view_preprocessed/pub/static/frontend pub/static/frontend
bin/magento setup:static-content:deploy -f --area frontend

Magento has a document for Javascript mixins, you can take a look https://developer.adobe.com/commerce/frontend-core/javascript/mixins/