diff --git a/docs/api/props.md b/docs/api/props.md index 35799d8..6802204 100644 --- a/docs/api/props.md +++ b/docs/api/props.md @@ -569,6 +569,18 @@ transition: { }, ``` +## uid + +A unique identifier used to generate IDs and DOM attributes. +Must be unique for every instance of the component. + +```js +uid: { + type: [String, Number], + default: () => uniqueId(), +}, +``` + ## value diff --git a/src/components/Select.vue b/src/components/Select.vue index 803dce5..1217c7a 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -656,11 +656,19 @@ export default { return noDrop ? false : open && !mutableLoading }, }, + + /** + * A unique identifier used to generate IDs in HTML. + * Must be unique for every instance of the component. + */ + uid: { + type: [String, Number], + default: () => uniqueId(), + }, }, data() { return { - uid: uniqueId(), search: '', open: false, isComposing: false, diff --git a/tests/unit/Accessibility.spec.js b/tests/unit/Accessibility.spec.js index 2180f42..a235b21 100644 --- a/tests/unit/Accessibility.spec.js +++ b/tests/unit/Accessibility.spec.js @@ -33,3 +33,15 @@ describe('Search Slot Scope', () => { }) }) }) + +describe('UID', () => { + it('works with strings', () => { + const Select = mountDefault({ uid: 'hello' }) + expect(Select.find('#vshello__combobox').exists()).toBeTruthy() + }) + + it('works with numbers', () => { + const Select = mountDefault({ uid: 2 }) + expect(Select.find('#vs2__combobox').exists()).toBeTruthy() + }) +})