test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 02:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [mention] replace props.disabled with useFormDisabled (#18119)

Browse Source 
* fix(components): [mention] replace props.disabled with useFormDisabled

* test: add test
This commit is contained in:
qiang 2024-09-02 17:51:05 +08:00 committed by GitHub
parent c24309aea0
commit 3a37320944
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/components/mention/__tests__/mention.test.tsx
View File

@ -1,6 +1,7 @@
import { mount } from '@vue/test-utils'
import { afterEach, describe, expect, test } from 'vitest'
import sleep from '@element-plus/test-utils/sleep'
import Form from '@element-plus/components/form'
import Mention from '../src/mention.vue'
describe('Mention.vue', () => {
@ -117,4 +118,23 @@ describe('Mention.vue', () => {
expect(option.attributes('aria-disabled')).toBe(undefined)
expect(option.attributes('aria-selected')).toBe('true')
})
test('should use props of form', async () => {
const wrapper = mount({
setup: () => () =>
(
<Form disabled>
<Mention options={options} />
</Form>
),
})
const dropdown = wrapper.findComponent({ name: 'ElMentionDropdown' })
const option = dropdown.find('.el-mention-dropdown__item')
expect(wrapper.find('.el-input').classes()).toContain('is-disabled')
expect(wrapper.find('input').attributes()).toHaveProperty('disabled')
expect(option.attributes('aria-disabled')).toBe('true')
expect(option.classes()).toContain('is-disabled')
})
})

5
packages/components/mention/src/mention.vue
View File

@ -4,6 +4,7 @@
v-bind="mergeProps(passInputProps, $attrs)"
ref="elInputRef"
:model-value="modelValue"
:disabled="disabled"
:role="dropdownVisible ? 'combobox' : undefined"
:aria-activedescendant="dropdownVisible ? hoveringId || '' : undefined"
:aria-controls="dropdownVisible ? contentId : undefined"
@ -61,6 +62,7 @@ import { useFocusController, useId, useNamespace } from '@element-plus/hooks'
import ElInput, { inputProps } from '@element-plus/components/input'
import ElTooltip from '@element-plus/components/tooltip'
import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { useFormDisabled } from '@element-plus/components/form'
import { isFunction } from '@element-plus/utils'
import { mentionEmits, mentionProps } from './mention'
import { getCursorPosition, getMentionCtx } from './helper'
@ -82,6 +84,7 @@ const emit = defineEmits(mentionEmits)
const passInputProps = computed(() => pick(props, Object.keys(inputProps)))
const ns = useNamespace('mention')
const disabled = useFormDisabled()
const contentId = useId()
const elInputRef = ref<InputInstance>()
@ -174,7 +177,7 @@ const handleInputKeyDown = (e: KeyboardEvent | Event) => {
const { wrapperRef } = useFocusController(elInputRef, {
beforeFocus() {
return props.disabled
return disabled.value
},
afterFocus() {
syncAfterCursorMove()