In Drupal 9 search forms, some custom themes will cause the Apply (or Submit) button to go missing, not display, or may be hidden. Even out of the box templates, for instance Classy or Claro.
Default CSS and TWIG Template Settings
This is caused by the twig template’s code which has an input class hidden for the the button. This will look similarly like below (take note of the class “hidden”):
<div class="item-submit">
<input class="hidden button js-form-submit form-submit btn btn-dark-3 btn-medium uppercase" data-drupal-selector="edit-submit-search-api" type="submit" id="edit-submit-search-api" value="Apply">
</div>
For example from a custom theme, generated from its /templates/input–submit.html.twig template:
<div class="item-submit">
<input{{ attributes.addClass('btn btn-dark-3 btn-medium uppercase') }} />{{ children }}
</div>
Fix and Solution
To override or fix this, without altering any twig template files or custom coding, a quick workaround is to override this behavior thru CSS. To force the submit button to appear, you may create a custom CSS such as:
input#edit-submit-search-api {
display: revert !important;
}
See the before and after screenshots.
Apply and Reset Buttons stacked up and not inline (beside each other)?
Additional tip, if the Apply and Reset (if you have one, depending on the exposed form settings or widget you used, e.g. Basic, or Better Exposed Filters, BFF) buttons are stacked up, you apply an additional inline-flex display class like below:
.item-submit {
display: inline-flex;
}
Hope this helps!
