Add table search filter clear button
- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
style guide
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I18f2e01c28c00c7e7b2ad1af924070241caf36a5
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index 9ebf468..eeb909a 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -12,12 +12,22 @@
</b-input-group-prepend>
<b-form-input
:id="`searchInput-${_uid}`"
+ ref="searchInput"
v-model="filter"
class="search-input"
type="text"
:placeholder="placeholder"
@input="onChangeInput"
- ></b-form-input>
+ >
+ </b-form-input>
+ <b-button
+ v-if="filter"
+ variant="link"
+ :aria-label="$t('global.ariaLabel.clearSearch')"
+ @click="onClearSearch"
+ >
+ <icon-close :title="$t('global.ariaLabel.clearSearch')" />
+ </b-button>
</b-input-group>
</b-form-group>
</div>
@@ -25,9 +35,11 @@
<script>
import IconSearch from '@carbon/icons-vue/es/search/16';
+import IconClose from '@carbon/icons-vue/es/close/20';
+
export default {
name: 'Search',
- components: { IconSearch },
+ components: { IconSearch, IconClose },
props: {
placeholder: {
type: String,
@@ -44,6 +56,11 @@
methods: {
onChangeInput() {
this.$emit('changeSearch', this.filter);
+ },
+ onClearSearch() {
+ this.filter = '';
+ this.$emit('clearSearch');
+ this.$refs.searchInput.focus();
}
}
};
@@ -60,4 +77,16 @@
z-index: 4;
stroke: gray('400');
}
+
+.btn {
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding: 0.4rem 1rem;
+ z-index: 4;
+ svg {
+ margin-left: 0;
+ vertical-align: sub;
+ }
+}
</style>