javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [select] display tags correctly (#11149)

Browse Source 
* fix(components): [select] display tags correctly

* fix: test cases
This commit is contained in:
zz
2023-01-10 22:38:44 +08:00
committed by GitHub
parent d6b14cf303
commit 73a9010e37
2 changed files with 11 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/components/select/__tests__/select.test.ts
View File

@@ -948,16 +948,9 @@ describe('Select', () => {
const selectWrapper = wrapper.findComponent(Select)
const inputWrapper = selectWrapper.findComponent({ ref: 'reference' })
const inputDom = inputWrapper.element
const inputRect = {
height: 40,
width: 221,
x: 44,
y: 8,
top: 8,
}
const mockInputWidth = vi
.spyOn(inputDom, 'getBoundingClientRect')
.mockReturnValue(inputRect as DOMRect)
.spyOn(inputDom as HTMLElement, 'offsetWidth', 'get')
.mockReturnValue(200)
selectWrapper.vm.handleResize()
options[0].click()
await nextTick()
@@ -968,9 +961,9 @@ describe('Select', () => {
const tagWrappers = wrapper.findAll('.el-select__tags-text')
for (const tagWrapper of tagWrappers) {
const tagWrapperDom = tagWrapper.element
expect(
Number.parseInt(tagWrapperDom.style.maxWidth) === inputRect.width - 75
).toBe(true)
expect(Number.parseInt(tagWrapperDom.style.maxWidth) === 200 - 75).toBe(
true
)
}
mockInputWidth.mockRestore()
})
@@ -1016,16 +1009,9 @@ describe('Select', () => {
const selectWrapper = wrapper.findComponent(Select)
const inputWrapper = selectWrapper.findComponent({ ref: 'reference' })
const inputDom = inputWrapper.element
const inputRect = {
height: 40,
width: 221,
x: 44,
y: 8,
top: 8,
}
const mockInputWidth = vi
.spyOn(inputDom, 'getBoundingClientRect')
.mockReturnValue(inputRect as DOMRect)
.spyOn(inputDom as HTMLElement, 'offsetWidth', 'get')
.mockReturnValue(200)
selectWrapper.vm.handleResize()
options[0].click()
await nextTick()
@@ -1035,9 +1021,9 @@ describe('Select', () => {
await nextTick()
const tagWrappers = wrapper.findAll('.el-select__tags-text')
const tagWrapperDom = tagWrappers[0].element
expect(
Number.parseInt(tagWrapperDom.style.maxWidth) === inputRect.width - 123
).toBe(true)
expect(Number.parseInt(tagWrapperDom.style.maxWidth) === 200 - 123).toBe(
true
)
mockInputWidth.mockRestore()
})

2
packages/components/select/src/useSelect.ts
View File

@@ -561,7 +561,7 @@ export const useSelect = (props, states: States, ctx) => {
}
const resetInputWidth = () => {
states.inputWidth = reference.value?.$el.getBoundingClientRect().width
states.inputWidth = reference.value?.$el.offsetWidth
}
const onInputChange = () => {