fix: hydration mismatch in aria-label-id

kushich · Mar 22, 2024 · cc0da4d · cc0da4d
1 parent b5382d2
commit cc0da4d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/packages/ui/src/components/va-radio/VaRadio.vue b/packages/ui/src/components/va-radio/VaRadio.vue
@@ -74,7 +74,6 @@
 <script lang="ts" setup>
 import { PropType, computed, shallowRef } from 'vue'
 
-import { generateUniqueId } from '../../utils/uuid'
 import {
   useComponentPresetProp,
   useColors,
@@ -87,6 +86,7 @@ import {
 } from '../../composables'
 import { VaMessageListWrapper } from '../va-message-list'
 import type { VaRadioOption } from './types'
+import { useComponentUuid } from '../../composables/useComponentUuid'
 
 defineOptions({
   name: 'VaRadio',
@@ -218,7 +218,8 @@ const iconComputedStyles = computed(() => {
   return { borderColor: computedError.value ? getColor('danger') : getColor(props.color) }
 })
 
-const computedName = computed(() => props.name || generateUniqueId())
+const componentId = useComponentUuid()
+const computedName = computed(() => props.name || componentId)
 const inputAttributesComputed = (option: any) => {
   const disabled = getDisabled(option)
   return {

diff --git a/packages/ui/src/components/va-slider/VaSlider.vue b/packages/ui/src/components/va-slider/VaSlider.vue
@@ -171,12 +171,11 @@ import {
   useSlots,
 } from 'vue'
 import pick from 'lodash/pick.js'
-
-import { generateUniqueId } from '../../utils/uuid'
 import { useComponentPresetProp, useColors, useArrayRefs, useBem, useStateful, useStatefulProps, useTranslation } from '../../composables'
 import { validateSlider } from './validateSlider'
 
 import { VaIcon } from '../va-icon'
+import { useComponentUuid } from '../../composables/useComponentUuid'
 
 defineOptions({
   name: 'VaSlider',
@@ -640,7 +639,8 @@ const unbindEvents = () => {
   document.removeEventListener('keydown', moveWithKeys)
 }
 
-const ariaLabelIdComputed = computed(() => `aria-label-id-${generateUniqueId()}`)
+const componentId = useComponentUuid()
+const ariaLabelIdComputed = computed(() => `aria-label-id-${componentId}`)
 
 const { tp } = useTranslation()
 const slots = useSlots()

diff --git a/packages/ui/src/components/va-switch/VaSwitch.vue b/packages/ui/src/components/va-switch/VaSwitch.vue
@@ -83,8 +83,6 @@
 import { PropType, computed, shallowRef, useSlots } from 'vue'
 import pick from 'lodash/pick.js'
 
-import { generateUniqueId } from '../../utils/uuid'
-
 import {
   useComponentPresetProp,
   useKeyboardOnlyFocus,
@@ -95,6 +93,7 @@ import {
 
 import { VaProgressCircle } from '../va-progress-circle'
 import { VaMessageListWrapper } from '../va-message-list'
+import { useComponentUuid } from '../../composables/useComponentUuid'
 
 defineOptions({
   name: 'VaSwitch',
@@ -208,7 +207,8 @@ const trackLabelStyle = computed(() => ({
 
 const slots = useSlots()
 
-const ariaLabelIdComputed = computed(() => `aria-label-id-${generateUniqueId()}`)
+const componentId = useComponentUuid()
+const ariaLabelIdComputed = computed(() => `aria-label-id-${componentId}`)
 const inputAttributesComputed = computed(() => ({
   id: props.id || undefined,
   name: props.name || undefined,