Custom Select Component

Overview

Custom Select Component resolves “drop-down is misplaced“ issue in IE.

For example standard select in IE looks like this:

Open

And custom select:

Open

Prerequisite

1. Setup Results widget Results widget with search tools with Vue SDK

Steps to create

1. Once results are shown properly CustomSelect component can be applied to the Sorting and ItemsPerPage components. For the reason they need to be overwritten with the following templates.

2. Overwriting the Sorting Component

   <script id="vue-hawksearch-sorting" type="x-template"> <div v-if="showItems" class="hawk-sorting"> <span class="hawk-sorting__label">{{ $t('Sort By') }}</span> <div class="custom-select-wrapper"> <custom-select class="select" :options="sortingItems.map(function(item) { return {label: item.Label, value: item.Value} })" :default="sortingItems.filter(function (item) { return !!item.Selected }).concat(sortingItems.filter(function (item) { return !!item.isDefault }))[0].Label" v-on:change="onChange" /> </div> </div> </script>

    

3. Overwriting the ItemsPerPage Component

   <script id="vue-hawksearch-items-per-page" type="x-template"> <div v-if="showItems" class="hawk-items-per-page"> <div class="custom-select-wrapper"> <custom-select class="select" :options="paginationItems.map(function(item) { return {label: item.Label, value: item.PageSize.toString()} })" :default="paginationItems.filter(function (item) {return !!item.Selected }).concat(paginationItems.filter(function (item) { return !!item.Default}))[0].Label" v-on:change="onChange" /> </div> </div> </script>

    

4. Both components Sorting and ItemsPerPage are part of Results Widget. By overwriting them we are changing how the toolbar looks like. That is not changing any of the widget functionality and doesn’t require additional changes in root component or template.