.shop-searchbar
  .row
    .small-12.large-5.columns.flex
      %div.search-wrap
        %input#search.text{"ng-model" => "query",
              placeholder: t(:products_search),
              "ng-debounce" => "200",
              "ofn-disable-enter" => true}
        %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
          %img{ src: "/assets/icn-close.png" }

      .hide-for-large-up
        %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
          = t(:products_filter_heading)
          %span{ng: {show: 'filtersCount()' }}
            ({{ filtersCount() }})

.shop-searchbar
  .row
    .small-12.large-5.columns.flex
      %div.search-wrap
        %input#search.text{"ng-model" => "query",
              type: 'search',
              placeholder: t(:products_search),
              "ng-debounce" => "200",
              "ofn-disable-enter" => true}
        %a.clear{type: 'button', ng: {show: 'query', click: 'clearQuery()'}, 'focus-search' => true}
          %img{ src: "/assets/icn-close.png" }

      .hide-for-large-up
        %button{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
          = t(:products_filter_heading)
          %span{ng: {show: 'filtersCount()' }}
            ({{ filtersCount() }})

Add explicit 'search' input type to search field.
Add explicit 'search' input type to search field.

In theory this should improve some of the custom-keyboard functionality added by mobiles, but the implementations will be vary...
