How do I change the admin toolbar search input box to type=search?

Question

I'd like to change the attribute "type" to "search". The search icon goes over the top of the text making it hard to see what you are typing. The themes are a combination of Adminimal for admin and Bulma for the front end. The Bulma front end is the problem.

The source html is as follows.

<input id="admin-toolbar-search-input" aria-labelledby="toolbar-item-administration-search" type="text" size="60" maxlength="128" class="form-text input ui-autocomplete-input" autocomplete="off" tabindex="-1">

I want the type attribute to be search so that the icon is hidden when you enter text.

I've tried overriding the bulma template input--bulma.html.twig. Not ideal from a scope perspective and setting these attributes here doesn't work.

{{ attributes.setAttribute('type', 'search') }}

Ideally I would find a theme pre-process function. I can't see to find one that works. How do I go about it?

Answer 1

The following hook works. I found it by text searching the project

function mytheme_preprocess_input(&$variables, $hook) {
 if ($hook == "input" && $variables['attributes']['id'] == "admin-toolbar-search-input") {
   $variables['attributes']['type']  = "search";
 }
}

It does not solve the icon problem in this case. The icon is in a different DOM element.

The fix to the search icon being over the text was

#admin-toolbar-search-tab input:focus + .icon.is-left {
 display: none;
}