fix: use focused element (#4466)

* fix: use focused element * chore: fix slider stories
epicmaxco · Feb 4, 2025 · d2a8129 · d2a8129
1 parent bac09fd
commit d2a8129
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/ui/src/components/va-slider/VaSlider.stories.ts b/packages/ui/src/components/va-slider/VaSlider.stories.ts
@@ -16,7 +16,7 @@ function getSlider () {
 
 function getSliderAll () {
   return {
-    slider: [...getStoryIdAll('slider')].map((el) => el.querySelector('[role="slider"]') as HTMLElement),
+    slider: [...getStoryIdAll('slider')].map((el) => [...el.querySelectorAll('[role="slider"]')] as HTMLElement[]).flat(),
     sliderTrack: getStorySelectorAll('.va-slider__track:not([class*=" "])'),
     sliderThumb: getStorySelectorAll('.va-slider__handler'),
   }
@@ -426,14 +426,16 @@ Range.play = async ({ step }) => {
     await userEvent.click(sliderTrack[0], { clientX: 0 })
     await userEvent.click(sliderTrack[0], { clientX })
 
-    expect(slider[0]).toHaveAttribute('aria-valuetext', '0,100')
+    expect(slider[0]).toHaveAttribute('aria-valuetext', '0')
+    expect(slider[1]).toHaveAttribute('aria-valuetext', '100')
   })
 
   await step('Must work on both sides with min and max (track)', async () => {
     await userEvent.click(sliderTrack[1], { clientX: 0 })
     await userEvent.click(sliderTrack[1], { clientX })
 
-    expect(slider[1]).toHaveAttribute('aria-valuetext', '15,85')
+    expect(slider[2]).toHaveAttribute('aria-valuetext', '15')
+    expect(slider[3]).toHaveAttribute('aria-valuetext', '85')
   })
 }
 
@@ -672,6 +674,7 @@ Vertical.play = async ({ step }) => {
     await userEvent.click(sliderTrack[2], { clientY })
     await userEvent.click(sliderTrack[2], { clientY: clientY + 168 })
 
-    expect(slider[2]).toHaveAttribute('aria-valuetext', '0,100')
+    expect(slider[3]).toHaveAttribute('aria-valuetext', '0')
+    expect(slider[2]).toHaveAttribute('aria-valuetext', '100')
   })
 }
diff --git a/packages/ui/src/composables/std/browser/useFocusedElement.ts b/packages/ui/src/composables/std/browser/useFocusedElement.ts
@@ -1,4 +1,4 @@
-import { onMounted, shallowRef, onScopeDispose } from 'vue'
+import { onMounted, shallowRef } from 'vue'
 import { useEvent } from '../event/useEvent'
 import { makeSharedComposable } from '../internal/makeSharedComposable'
 

diff --git a/packages/ui/src/composables/std/event/useEvent.ts b/packages/ui/src/composables/std/event/useEvent.ts
@@ -25,7 +25,7 @@ export const useEvent = <N extends UseEventEventName, E extends Event>(
   event: N,
   listener: (this: GlobalEventHandlers, event: UseEventEvent<N, E>) => any,
   target?: MaybeRef<TemplateRef | Window> | boolean,
-  options: AddEventListenerOptions = {},
+  options?: AddEventListenerOptions,
 ) => {
   const window = useWindow()