From bf8be2ec268ff6001b4d1f05ed093b271bf9b259 Mon Sep 17 00:00:00 2001
From: The Jared Wilcurt <TheJaredWilcurt@users.noreply.github.com>
Date: Sun, 17 Oct 2021 13:04:51 -0400
Subject: [PATCH] feat: move `uid` to props (#1362)

* Add uniqueKey prop

* move uid to prop

* Update props.md

Co-authored-by: TheJaredWilcurt <4629794+TheJaredWilcurt@users.noreply.github.com>
Co-authored-by: Jeff Sagal <sagalbot@gmail.com>
---
 docs/api/props.md                | 12 ++++++++++++
 src/components/Select.vue        | 10 +++++++++-
 tests/unit/Accessibility.spec.js | 12 ++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

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()
+  })
+})