slim-select 2.13.1 → 3.0.1

package/src/slim-select/render.ts

@@ -1,6 +1,6 @@
 import { debounce } from './helpers'
 import Settings from './settings'
-import Store, { DataArray, Optgroup, Option, OptionOptional } from './store'
+import Store, { Optgroup, Option } from './store'
 import CssClasses from './classes'
 
 export interface Callbacks {
@@ -8,7 +8,7 @@ export interface Callbacks {
   close: () => void
   addable?: (
     value: string
-  ) => Promise<OptionOptional | string> | OptionOptional | string | false | undefined | null | Error
+  ) => Promise<Partial<Option> | string> | Partial<Option> | string | false | undefined | null | Error
   setSelected: (value: string | string[], runAfterChange: boolean) => void
   addOption: (option: Option) => void
   search: (search: string) => void
@@ -84,6 +84,7 @@ export default class Render {
   public enable(): void {
     // Remove disabled class
     this.main.main.classList.remove(this.classes.disabled)
+    this.main.main.setAttribute('aria-disabled', 'false')
 
     // Set search input to "enabled"
     this.content.search.input.disabled = false
@@ -93,6 +94,7 @@ export default class Render {
   public disable(): void {
     // Add disabled class
     this.main.main.classList.add(this.classes.disabled)
+    this.main.main.setAttribute('aria-disabled', 'true')
 
     // Set search input to disabled
     this.content.search.input.disabled = true
@@ -100,11 +102,20 @@ export default class Render {
 
   public open(): void {
     this.main.arrow.path.setAttribute('d', this.classes.arrowOpen)
-
-    // Add class to main container
-    this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow)
     this.main.main.setAttribute('aria-expanded', 'true')
 
+    // Set direction class on both main and content (persists, never removed)
+    const isAbove = this.settings.openPosition === 'up'
+    const dirClass = isAbove ? this.classes.dirAbove : this.classes.dirBelow
+    this.main.main.classList.add(dirClass)
+    this.content.main.classList.add(dirClass)
+
+    // Add open class to content to trigger open animation
+    this.content.main.classList.add(this.classes.contentOpen)
+
+    // Make search visible to screen readers when opened
+    this.content.search.input.removeAttribute('aria-hidden')
+
     // move the content in to the right location
     this.moveContent()
 
@@ -120,12 +131,18 @@ export default class Render {
   }
 
   public close(): void {
-    this.main.main.classList.remove(this.classes.openAbove)
-    this.main.main.classList.remove(this.classes.openBelow)
     this.main.main.setAttribute('aria-expanded', 'false')
-    this.content.main.classList.remove(this.classes.openAbove)
-    this.content.main.classList.remove(this.classes.openBelow)
     this.main.arrow.path.setAttribute('d', this.classes.arrowClose)
+
+    // Remove open class from content to trigger close animation
+    // Direction class (dirAbove/dirBelow) persists to maintain correct transform-origin
+    this.content.main.classList.remove(this.classes.contentOpen)
+
+    // Hide search from screen readers when closed
+    this.content.search.input.setAttribute('aria-hidden', 'true')
+
+    // Clear active descendant when closed
+    this.main.main.removeAttribute('aria-activedescendant')
   }
 
   public updateClassStyles(): void {
@@ -163,12 +180,24 @@ export default class Render {
   }
 
   public updateAriaAttributes() {
+    const listboxId = this.content.list.id
+
+    // Main combobox
     this.main.main.role = 'combobox'
     this.main.main.setAttribute('aria-haspopup', 'listbox')
-    this.main.main.setAttribute('aria-controls', this.content.main.dataset.id ?? '')
+    this.main.main.setAttribute('aria-controls', listboxId)
     this.main.main.setAttribute('aria-expanded', 'false')
-    this.content.main.setAttribute('role', 'listbox')
-    // do an aria-labelledby here maybe
+
+    this.content.list.setAttribute('role', 'listbox')
+    this.content.list.setAttribute('aria-label', this.settings.ariaLabel + ' listbox')
+
+    // Add aria-multiselectable for multiple selects
+    if (this.settings.isMultiple) {
+      this.content.list.setAttribute('aria-multiselectable', 'true')
+    }
+
+    // Search input should also control the listbox
+    this.content.search.input.setAttribute('aria-controls', listboxId)
   }
 
   public mainDiv(): Main {
@@ -520,7 +549,7 @@ export default class Render {
       // Create delete div element
       const deleteDiv = document.createElement('div')
       deleteDiv.classList.add(this.classes.valueDelete)
-      deleteDiv.setAttribute('tabindex', '0')  // Make the div focusable for tab navigation
+      deleteDiv.setAttribute('tabindex', '0') // Make the div focusable for tab navigation
 
       // Add delete onclick event
       deleteDiv.onclick = (e: Event) => {
@@ -555,7 +584,9 @@ export default class Render {
           for (const o of after) {
             if (o instanceof Optgroup) {
               for (const c of o.options) {
-                selectedIds.push(c.id)
+                if (c.id) {
+                  selectedIds.push(c.id)
+                }
               }
             }
 
@@ -592,7 +623,7 @@ export default class Render {
       // Add keydown event listener for keyboard navigation (Enter key)
       deleteDiv.onkeydown = (e) => {
         if (e.key === 'Enter') {
-          deleteDiv.click()  // Trigger the click event when Enter is pressed
+          deleteDiv.click() // Trigger the click event when Enter is pressed
         }
       }
     }
@@ -668,9 +699,12 @@ export default class Render {
     input.placeholder = this.settings.searchPlaceholder
     input.tabIndex = -1
     input.setAttribute('aria-label', this.settings.searchPlaceholder)
+    input.setAttribute('aria-autocomplete', 'list')
     input.setAttribute('autocapitalize', 'off')
     input.setAttribute('autocomplete', 'off')
     input.setAttribute('autocorrect', 'off')
+    // Hide from screen readers by default (shown when opened)
+    input.setAttribute('aria-hidden', 'true')
 
     input.oninput = debounce((e: Event) => {
       this.callbacks.search((e.target as HTMLInputElement).value)
@@ -701,15 +735,16 @@ export default class Render {
           }
           return true
         case 'Enter':
-          if (this.callbacks.addable) {
+          // Check if there's a highlighted option first
+          const highlightedEnter = this.content.list.querySelector('.' + this.classes.highlighted) as HTMLDivElement
+          if (highlightedEnter) {
+            // If an option is highlighted, select it (even if addable is enabled)
+            highlightedEnter.click()
+            return false
+          } else if (this.callbacks.addable) {
+            // If no option is highlighted and addable is enabled, add new item
             addable.click()
             return false
-          } else {
-            const highlighted = this.content.list.querySelector('.' + this.classes.highlighted) as HTMLDivElement
-            if (highlighted) {
-              highlighted.click()
-              return false
-            }
           }
           return true
       }
@@ -752,7 +787,7 @@ export default class Render {
         // Run finish will be ran at the end of the addable function.
         // Reason its in a function is so we can run it after the
         // addable function is done for promise based addables
-        const runFinish = (oo: OptionOptional) => {
+        const runFinish = (oo: Partial<Option>) => {
           let newOption = new Option(oo)
 
           // Call addOption to add the new option
@@ -831,6 +866,10 @@ export default class Render {
     this.content.search.input.focus()
   }
 
+  public clearSearch(): void {
+    this.content.search.input.value = ''
+  }
+
   public getOptions(notPlaceholder = false, notDisabled = false, notHidden = false): HTMLDivElement[] {
     // Put together query string
     let query = '.' + this.classes.option
@@ -894,7 +933,7 @@ export default class Render {
 
         // If previous option has parent classes ss-optgroup with ss-open then click it
         const prevParent = prevOption.parentElement
-        if (prevParent && prevParent.classList.contains(this.classes.open)) {
+        if (prevParent && prevParent.classList.contains(this.classes.mainOpen)) {
           const optgroupLabel = prevParent.querySelector('.' + this.classes.optgroupLabel) as HTMLDivElement
           if (optgroupLabel) {
             optgroupLabel.click()
@@ -907,6 +946,11 @@ export default class Render {
         selectOption.classList.add(this.classes.highlighted)
         this.ensureElementInView(this.content.list, selectOption)
 
+        // Update aria-activedescendant for screen readers
+        if (selectOption.id) {
+          this.main.main.setAttribute('aria-activedescendant', selectOption.id)
+        }
+
         // If selected option has parent classes ss-optgroup with ss-close then click it
         const selectParent = selectOption.parentElement
         if (selectParent && selectParent.classList.contains(this.classes.close)) {
@@ -922,10 +966,16 @@ export default class Render {
 
     // If we get here, there is no highlighted option
     // So we will highlight the first or last based upon direction
-    options[dir === 'down' ? 0 : options.length - 1].classList.add(this.classes.highlighted)
+    const firstHighlight = options[dir === 'down' ? 0 : options.length - 1]
+    firstHighlight.classList.add(this.classes.highlighted)
+
+    // Update aria-activedescendant for screen readers
+    if (firstHighlight.id) {
+      this.main.main.setAttribute('aria-activedescendant', firstHighlight.id)
+    }
 
     // Scroll to highlighted one
-    this.ensureElementInView(this.content.list, options[dir === 'down' ? 0 : options.length - 1])
+    this.ensureElementInView(this.content.list, firstHighlight)
   }
 
   // Create main container that options will reside
@@ -933,6 +983,11 @@ export default class Render {
     const options = document.createElement('div')
     options.classList.add(this.classes.list)
 
+    // Add id for ARIA controls reference
+    const listId = this.settings.id + '-list'
+    options.id = listId
+    options.dataset.id = listId
+
     return options
   }
 
@@ -957,7 +1012,7 @@ export default class Render {
   }
 
   // Take in data and add options to
-  public renderOptions(data: DataArray): void {
+  public renderOptions(data: (Option | Optgroup)[]): void {
     // Clear out innerHtml
     this.content.list.innerHTML = ''
 
@@ -1084,13 +1139,14 @@ export default class Render {
               return
             } else {
               // Put together new list with all options in this optgroup
-              const newSelected = currentSelected.concat(d.options.map((o) => o.id))
+              let optionIds = d.options.map((o) => o.id).filter((id) => id !== undefined)
+              const newSelected = currentSelected.concat(optionIds)
 
               // Loop through options and if they don't exist in the store
               // run addOption callback
               for (const o of d.options) {
-                if (!this.store.getOptionByID(o.id)) {
-                  this.callbacks.addOption(o)
+                if (o.id && !this.store.getOptionByID(o.id)) {
+                  this.callbacks.addOption(new Option(o))
                 }
               }
 
@@ -1121,10 +1177,10 @@ export default class Render {
 
           // If any options are selected or someone is searching, set optgroup to open
           if (d.options.some((o) => o.selected) || this.content.search.input.value.trim() !== '') {
-            optgroupClosable.classList.add(this.classes.open)
+            optgroupClosable.classList.add(this.classes.mainOpen)
             optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen)
           } else if (d.closable === 'open') {
-            optgroupEl.classList.add(this.classes.open)
+            optgroupEl.classList.add(this.classes.mainOpen)
             optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen)
           } else if (d.closable === 'close') {
             optgroupEl.classList.add(this.classes.close)
@@ -1139,10 +1195,10 @@ export default class Render {
             // If optgroup is closed, open it
             if (optgroupEl.classList.contains(this.classes.close)) {
               optgroupEl.classList.remove(this.classes.close)
-              optgroupEl.classList.add(this.classes.open)
+              optgroupEl.classList.add(this.classes.mainOpen)
               optgroupClosableArrow.setAttribute('d', this.classes.arrowOpen)
             } else {
-              optgroupEl.classList.remove(this.classes.open)
+              optgroupEl.classList.remove(this.classes.mainOpen)
               optgroupEl.classList.add(this.classes.close)
               optgroupClosableArrow.setAttribute('d', this.classes.arrowClose)
             }
@@ -1156,8 +1212,8 @@ export default class Render {
         optgroupEl.appendChild(optgroupLabel)
 
         // Loop through options
-        for (const o of d.options) {
-          optgroupEl.appendChild(this.option(o))
+        for (const option of d.options) {
+          optgroupEl.appendChild(this.option(new Option(option)))
           fragment.appendChild(optgroupEl)
         }
       }
@@ -1185,7 +1241,7 @@ export default class Render {
     // Create option
     const optionEl = document.createElement('div')
     optionEl.dataset.id = option.id // Dataset id for identifying an option
-    // optionEl.id = option.id // Remove for now as it is not needed and add duplicate id errors
+    optionEl.id = this.settings.id + '-' + option.id // Unique ID for ARIA references
     optionEl.classList.add(this.classes.option)
     optionEl.setAttribute('role', 'option') // WCAG attribute
     if (option.class) {
@@ -1249,17 +1305,24 @@ export default class Render {
       const selectedOptions = this.store.getSelected()
       const element = e.currentTarget as HTMLDivElement
       const elementID = String(element.dataset.id)
+      const isCmd = e.ctrlKey || e.metaKey // Cmd (Mac) or Ctrl (Windows/Linux)
+
+      // If the option is disabled, do nothing
+      if (option.disabled) {
+        return
+      }
 
-      // If the option is disabled or selected and the user isnt allowed to deselect
-      if (option.disabled || (option.selected && !this.settings.allowDeselect)) {
+      // allowDeselect only applies to single-select mode
+      // In multi-select, you can always toggle options on/off
+      if (!this.settings.isMultiple && option.selected && !this.settings.allowDeselect) {
         return
       }
 
       // Check limit and do nothing if limit is reached and the option is not selected
-      // Also check reverse for min limit and is selected
+      // Also check reverse for min limit and is selected (allow Cmd to bypass minSelected)
       if (
         (this.settings.isMultiple && this.settings.maxSelected <= selectedOptions.length && !option.selected) ||
-        (this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected)
+        (this.settings.isMultiple && this.settings.minSelected >= selectedOptions.length && option.selected && !isCmd)
       ) {
         return
       }
@@ -1269,35 +1332,56 @@ export default class Render {
       const before = this.store.getSelectedOptions()
       let after = [] as Option[]
 
-      // If multiple
+      // If multiple - mimic native browser multi-select behavior
       if (this.settings.isMultiple) {
-        if (option.selected) {
-          // If selected after would remove
-          after = before.filter((o: Option) => o.id !== elementID)
-        } else {
-          // If not selected after would add
-          after = before.concat(option)
-
-          // Handles range selection
-          if (!this.settings.closeOnSelect) {
-            if (e.shiftKey && this.lastSelectedOption) {
-              const options = this.store.getDataOptions()
-              let lastClickedOptionIndex = options.findIndex((o: Option) => o.id === this.lastSelectedOption!.id)
-              let currentOptionIndex = options.findIndex((o: Option) => o.id === option.id)
-              if (lastClickedOptionIndex >= 0 && currentOptionIndex >= 0) {
-                // Select the range from the last clicked option to the current one, or vice versa.
-                const startIndex = Math.min(lastClickedOptionIndex, currentOptionIndex)
-                const endIndex = Math.max(lastClickedOptionIndex, currentOptionIndex)
-                const afterRange = options.slice(startIndex, endIndex + 1)
-                if (afterRange.length > 0 && afterRange.length < this.settings.maxSelected) {
-                  // Set the union between the current range and the previously selected values, removing duplicates
-                  after = before.concat(afterRange.filter((a) => !before.find((b) => b.id === a.id)))
-                }
-              }
-            } else if (!option.selected) {
-              this.lastSelectedOption = option
+        const isCurrentlySelected = before.some((o: Option) => o.id === elementID)
+        const isShift = e.shiftKey
+
+        // Shift+Click: Select range from last clicked to current
+        if (isShift && this.lastSelectedOption) {
+          const options = this.store.getDataOptions()
+          const lastIndex = options.findIndex((o: Option) => o.id === this.lastSelectedOption!.id)
+          const currentIndex = options.findIndex((o: Option) => o.id === option.id)
+
+          if (lastIndex >= 0 && currentIndex >= 0) {
+            const startIndex = Math.min(lastIndex, currentIndex)
+            const endIndex = Math.max(lastIndex, currentIndex)
+            const rangeOptions = options.slice(startIndex, endIndex + 1)
+
+            // Check if range would exceed maxSelected
+            const newSelections = rangeOptions.filter((opt) => !before.find((b) => b.id === opt.id))
+            if (before.length + newSelections.length <= this.settings.maxSelected) {
+              // Add range to existing selections
+              after = before.concat(newSelections)
+            } else {
+              // Range too large, keep existing selections
+              after = before
             }
+          } else {
+            after = before
+          }
+        }
+        // Cmd/Ctrl+Click: Toggle selection without affecting others (keeps dropdown open)
+        else if (isCmd) {
+          if (isCurrentlySelected) {
+            // Deselect this option
+            after = before.filter((o: Option) => o.id !== elementID)
+          } else {
+            // Add this option to selection
+            after = before.concat(option)
           }
+          this.lastSelectedOption = option
+        }
+        // Regular Click: Toggle this option (add/remove), will close dropdown
+        else {
+          if (isCurrentlySelected) {
+            // Deselect this option
+            after = before.filter((o: Option) => o.id !== elementID)
+          } else {
+            // Add this option to selection
+            after = before.concat(option)
+          }
+          this.lastSelectedOption = option
         }
       }
 
@@ -1339,8 +1423,12 @@ export default class Render {
           false
         )
 
-        // If closeOnSelect is true
-        if (this.settings.closeOnSelect) {
+        // Close dropdown unless using modifier keys in multi-select
+        // (mimics native multi-select behavior where you can keep selecting)
+        const isModifierKey = e.ctrlKey || e.metaKey || e.shiftKey // Cmd/Ctrl or Shift
+        const shouldClose = this.settings.closeOnSelect && !(this.settings.isMultiple && isModifierKey)
+
+        if (shouldClose) {
           this.callbacks.close()
         }
 
@@ -1363,21 +1451,55 @@ export default class Render {
   }
 
   private highlightText(str: string, search: any, className: string) {
-    // the completed string will be itself if already set, otherwise, the string that was passed in
-    let completedString: any = str
-    const regex = new RegExp('(?![^<]*>)(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i')
-
-    // If the regex doesn't match the string just exit
-    if (!str.match(regex)) {
+    const searchTerm = search.trim()
+    if (searchTerm === '') {
       return str
     }
 
-    // Otherwise, get to highlighting
-    const matchStartPosition = (str.match(regex) as any).index
-    const matchEndPosition = matchStartPosition + (str.match(regex) as any)[0].toString().length
-    const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition)
-    completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`)
-    return completedString
+    // Escape special regex characters in the search term to prevent regex injection
+    const escapedSearch = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+    // Create a temporary div to parse HTML and work with text nodes only
+    const tempDiv = document.createElement('div')
+    tempDiv.innerHTML = str
+
+    // Function to recursively process text nodes
+    const highlightTextNodes = (node: Node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent || ''
+        const regex = new RegExp('(' + escapedSearch + ')', 'i')
+
+        if (regex.test(text)) {
+          // Create a temporary container for the highlighted content
+          const wrapper = document.createElement('span')
+          const parts = text.split(regex)
+
+          parts.forEach((part, index) => {
+            if (part && regex.test(part)) {
+              // This is the matched part - wrap it in mark
+              const mark = document.createElement('mark')
+              mark.className = className
+              mark.textContent = part
+              wrapper.appendChild(mark)
+            } else if (part) {
+              // This is not the matched part - keep as text
+              wrapper.appendChild(document.createTextNode(part))
+            }
+          })
+
+          // Replace the text node with the wrapper
+          node.parentNode?.replaceChild(wrapper, node)
+        }
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        // Recursively process child nodes
+        Array.from(node.childNodes).forEach((child) => highlightTextNodes(child))
+      }
+    }
+
+    // Process all text nodes in the temporary div
+    Array.from(tempDiv.childNodes).forEach((node) => highlightTextNodes(node))
+
+    return tempDiv.innerHTML
   }
 
   public moveContentAbove(): void {
@@ -1385,11 +1507,11 @@ export default class Render {
     const mainHeight = this.main.main.offsetHeight
     const contentHeight = this.content.main.offsetHeight
 
-    // Set classes
-    this.main.main.classList.remove(this.classes.openBelow)
-    this.main.main.classList.add(this.classes.openAbove)
-    this.content.main.classList.remove(this.classes.openBelow)
-    this.content.main.classList.add(this.classes.openAbove)
+    // Set direction classes on both main and content
+    this.main.main.classList.remove(this.classes.dirBelow)
+    this.main.main.classList.add(this.classes.dirAbove)
+    this.content.main.classList.remove(this.classes.dirBelow)
+    this.content.main.classList.add(this.classes.dirAbove)
 
     // Set the content position
     const containerRect = this.main.main.getBoundingClientRect()
@@ -1402,11 +1524,11 @@ export default class Render {
   }
 
   public moveContentBelow(): void {
-    // Set classes
-    this.main.main.classList.remove(this.classes.openAbove)
-    this.main.main.classList.add(this.classes.openBelow)
-    this.content.main.classList.remove(this.classes.openAbove)
-    this.content.main.classList.add(this.classes.openBelow)
+    // Set direction classes on both main and content
+    this.main.main.classList.remove(this.classes.dirAbove)
+    this.main.main.classList.add(this.classes.dirBelow)
+    this.content.main.classList.remove(this.classes.dirAbove)
+    this.content.main.classList.add(this.classes.dirBelow)
 
     // Set the content position
     const containerRect = this.main.main.getBoundingClientRect()

package/src/slim-select/select.test.ts

@@ -4,7 +4,7 @@
 
 'use strict'
 
-import { describe, expect, jest, test } from '@jest/globals'
+import { describe, expect, vi, test, beforeEach } from 'vitest'
 import Select from './select'
 import Store, { Optgroup, Option } from './store'
 
@@ -64,7 +64,15 @@ describe('select module', () => {
       select.hideUI()
 
       expect(select.select.tabIndex).toBe(-1)
-      expect(select.select.style.display).toBe('none')
+      // Visually hidden but still focusable for form validation
+      expect(select.select.style.position).toBe('absolute')
+      expect(select.select.style.width).toBe('1px')
+      expect(select.select.style.height).toBe('1px')
+      expect(select.select.style.opacity).toBe('0')
+      expect(select.select.style.pointerEvents).toBe('none')
+      expect(select.select.style.margin).toBe('0px')
+      expect(select.select.style.padding).toBe('0px')
+      expect(select.select.style.clip).toContain('rect')
       expect(select.select.getAttribute('aria-hidden')).toBe('true')
     })
   })
@@ -72,13 +80,23 @@ describe('select module', () => {
   describe('showUI', () => {
     test('HTML attributes get reset', () => {
       select.select.tabIndex = -1
-      select.select.style.display = 'none'
+      select.select.style.position = 'absolute'
+      select.select.style.width = '0'
+      select.select.style.opacity = '0'
+      select.select.style.margin = '0'
+      select.select.style.padding = '0'
+      select.select.style.borderWidth = '0'
       select.select.setAttribute('aria-hidden', 'true')
 
       select.showUI()
 
       expect(select.select.tabIndex).toBeFalsy()
-      expect(select.select.style.display).toBeFalsy()
+      expect(select.select.style.position).toBeFalsy()
+      expect(select.select.style.width).toBeFalsy()
+      expect(select.select.style.opacity).toBeFalsy()
+      expect(select.select.style.margin).toBeFalsy()
+      expect(select.select.style.padding).toBeFalsy()
+      // borderWidth gets reset
       expect(select.select.getAttribute('aria-hidden')).toBeNull()
     })
   })
@@ -263,7 +281,7 @@ describe('select module', () => {
       let data = select.getData() as Option[]
       expect(data[0].selected).toBe(true)
 
-      const onValueMock = jest.fn()
+      const onValueMock = vi.fn()
       select.onValueChange = onValueMock
 
       // Change the value
@@ -284,7 +302,7 @@ describe('select module', () => {
     })
 
     test('listener is triggered when inner HTML is replaced with new options', async () => {
-      const onValueMock = jest.fn()
+      const onValueMock = vi.fn()
       select.onValueChange = onValueMock
 
       selectElement.innerHTML = `<option value="4">Four</option>
@@ -315,7 +333,7 @@ describe('select module', () => {
       let data = select.getData() as Option[]
       expect(data).toHaveLength(3)
 
-      const onOptionsMock = jest.fn()
+      const onOptionsMock = vi.fn()
       select.onOptionsChange = onOptionsMock
 
       selectElement.innerHTML = '<option value="1">One</option><option value="2">Two</option>'
@@ -346,7 +364,7 @@ describe('select module', () => {
       const optGroups = select.getData() as Optgroup[]
       expect(optGroups).toHaveLength(2)
 
-      const onOptionsMock = jest.fn()
+      const onOptionsMock = vi.fn()
       select.onOptionsChange = onOptionsMock
 
       const selectOptgroup = document.getElementById('test_optgroup') as HTMLOptGroupElement
@@ -376,7 +394,7 @@ describe('select module', () => {
       let data = select.getData() as Option[]
       expect(data[0].text).toBe('One')
 
-      const onOptionsMock = jest.fn()
+      const onOptionsMock = vi.fn()
       select.onOptionsChange = onOptionsMock
 
       let option = selectElement.options[0]
@@ -409,7 +427,7 @@ describe('select module', () => {
 
       expect(dataOptgroup[0].options[0].text).toBe('One')
 
-      const onOptionsMock = jest.fn()
+      const onOptionsMock = vi.fn()
       select.onOptionsChange = onOptionsMock
 
       let selectOption = document.getElementById('test_option') as HTMLOptionElement