{
expect(wrapper.html()).toMatchSnapshot()
})
- it('renders with correct px width', () => {
+ it('renders with correct px width', async () => {
const width = 350
const wrapper = mount(KSelect, {
@@ -70,10 +70,10 @@ describe('KSelect', () => {
}
})
const selectedItem = wrapper.find('.k-select')
- const popover = wrapper.find('.k-select-popover')
+
+ await wrapper.vm.$nextTick()
expect(selectedItem.element.style['width']).toEqual(width + 'px')
- expect(popover.element.style['width']).toEqual(width + 'px') // 10 pixels less with spacing
})
it('renders with correct label', () => {
diff --git a/packages/KSelect/KSelect.vue b/packages/KSelect/KSelect.vue
index 430609f1f8..18173d74fb 100644
--- a/packages/KSelect/KSelect.vue
+++ b/packages/KSelect/KSelect.vue
@@ -78,13 +78,15 @@
color="var(--grey-500)"
size="15" />
+ @keyup="!$attrs.disabled ? triggerFocus(isToggled) : null" />
@@ -209,6 +211,13 @@ export default {
type: Boolean,
default: false
},
+ /**
+ * Control whether the input for `select` and `dropdown` appearances supports filtering.
+ */
+ enableFiltering: {
+ type: Boolean,
+ default: null
+ },
/**
* Override default filter functionality of case-insensitive search on label
*/
@@ -227,6 +236,7 @@ export default {
data: function () {
return {
+ inputWidth: 0,
filterStr: '',
selectedItem: null,
selectId: !this.testMode ? uuid.v1() : 'test-select-id-1234',
@@ -242,7 +252,8 @@ export default {
...defaultKPopAttributes,
...this.kpopAttributes,
popoverClasses: `${defaultKPopAttributes.popoverClasses} ${this.kpopAttributes.popoverClasses} k-select-pop-${this.appearance}`,
- width: this.width,
+ width: String(this.inputWidth),
+ maxWidth: String(this.inputWidth),
disabled: this.$attrs.disabled
}
},
@@ -250,24 +261,40 @@ export default {
return this.$listeners
},
widthValue: function () {
- let w
+ let w = ''
if (!this.width) {
- w = 200
+ w = '200'
if (this.appearance === 'button') {
- w = 230
+ w = '230'
}
} else {
w = this.width
}
- return w === 'auto' ? w : w + 'px'
+ if (w !== 'auto' && !w.endsWith('%') && !w.endsWith('px')) {
+ w += 'px'
+ }
+
+ return w
},
widthStyle: function () {
return {
width: this.widthValue
}
},
+ filterIsEnabled: function () {
+ if (this.enableFiltering !== null) {
+ // filtering not allowed for `button` appearance
+ return this.appearance === 'button' ? false : this.enableFiltering
+ }
+
+ if (this.appearance === 'dropdown') {
+ return true
+ }
+
+ return false
+ },
filteredItems: function () {
return this.filterFunc({ items: this.selectItems, query: this.filterStr })
},
@@ -278,7 +305,7 @@ export default {
return this.$attrs.placeholder
}
- if (this.appearance === 'button') {
+ if (this.appearance === 'button' || !this.filterIsEnabled) {
return 'Select an item'
}
@@ -311,6 +338,12 @@ export default {
}
}
},
+ mounted () {
+ const inputElem = document.getElementById(this.selectInputId)
+ if (inputElem) {
+ this.inputWidth = inputElem.offsetWidth
+ }
+ },
methods: {
handleItemSelect (item) {
this.selectItems.forEach(anItem => {
@@ -395,6 +428,12 @@ export default {
width: 100%;
height: 44px;
+ &.cursor-default {
+ input.k-input {
+ cursor: default;
+ }
+ }
+
input.k-input {
padding: var(--spacing-xs);
height: 100%;
diff --git a/packages/KSelect/__snapshots__/KSelect.spec.js.snap b/packages/KSelect/__snapshots__/KSelect.spec.js.snap
index f938b2eb29..1a594dfd82 100644
--- a/packages/KSelect/__snapshots__/KSelect.spec.js.snap
+++ b/packages/KSelect/__snapshots__/KSelect.spec.js.snap
@@ -13,7 +13,7 @@ exports[`KSelect matches snapshot 1`] = `