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.

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

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.

1 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.submitBtn.disabled = false; // Customize to remove the disabled attribute

        /** @inheritdoc */
        _onPropertyChange: function () {
            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/

  • Thank you so much for showing me how to extend the existing js. It worked, but I'm getting an error in the console that refused to apply script because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.. Commented Oct 10, 2022 at 15:40
  • Is there something I need to do after adding config object in require-config.js? Commented Oct 10, 2022 at 15:42
  • It's giving me a 404 not found error from require.js. Commented Oct 10, 2022 at 15:53
  • I've updated the answer to add the re-deploy static content step. Please do that and verify.
    – Tu Van
    Commented Oct 10, 2022 at 16:03
  • I ran the step 3 commands, but my issue still persists. The errors are still showing up. Although the code is working, do you know what could be the reason of that? Commented Oct 11, 2022 at 1:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.