slim-select 2.13.1 → 3.0.0

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

@@ -1,10 +1,6 @@
-/**
- * @jest-environment jsdom
- */
-
 'use strict'
 
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test, vi, beforeEach } from 'vitest'
 import Render, { Callbacks } from './render'
 import Settings from './settings'
 import Store, { Option } from './store'
@@ -12,14 +8,14 @@ import CssClasses from './classes'
 
 describe('render module', () => {
   let render: Render
-  let openMock: jest.Mock
-  let closeMock: jest.Mock
-  let addSelectedMock: jest.Mock
-  let setSelectedMock: jest.Mock
-  let addOptionMock: jest.Mock
-  let searchMock: jest.Mock
-  let afterChangeMock: jest.Mock
-  let beforeChangeMock: jest.Mock
+  let openMock: ReturnType<typeof vi.fn>
+  let closeMock: ReturnType<typeof vi.fn>
+  let addSelectedMock: ReturnType<typeof vi.fn>
+  let setSelectedMock: ReturnType<typeof vi.fn>
+  let addOptionMock: ReturnType<typeof vi.fn>
+  let searchMock: ReturnType<typeof vi.fn>
+  let afterChangeMock: ReturnType<typeof vi.fn>
+  let beforeChangeMock: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
     const store = new Store('single', [
@@ -42,14 +38,14 @@ describe('render module', () => {
     const settings = new Settings()
     const classes = new CssClasses()
 
-    openMock = jest.fn(() => {})
-    closeMock = jest.fn(() => {})
-    addSelectedMock = jest.fn(() => {})
-    setSelectedMock = jest.fn(() => {})
-    addOptionMock = jest.fn(() => {})
-    searchMock = jest.fn(() => {})
-    afterChangeMock = jest.fn(() => {})
-    beforeChangeMock = jest.fn(() => true)
+    openMock = vi.fn(() => {})
+    closeMock = vi.fn(() => {})
+    addSelectedMock = vi.fn(() => {})
+    setSelectedMock = vi.fn(() => {})
+    addOptionMock = vi.fn(() => {})
+    searchMock = vi.fn(() => {})
+    afterChangeMock = vi.fn(() => {})
+    beforeChangeMock = vi.fn(() => true)
 
     // default callbacks
     const callbacks = {
@@ -123,24 +119,33 @@ describe('render module', () => {
       render.open()
 
       expect(render.main.arrow.path.getAttribute('d')).toBe(render.classes.arrowOpen)
-      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(true)
-      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(false)
       expect(render.main.main.getAttribute('aria-expanded')).toBe('true')
-      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(true)
-      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(false)
+      expect(render.content.main.classList.contains(render.classes.contentOpen)).toBe(true)
+      // Direction class should be set on both main and content (dirAbove or dirBelow)
+      const mainHasDirection =
+        render.main.main.classList.contains(render.classes.dirAbove) ||
+        render.main.main.classList.contains(render.classes.dirBelow)
+      const contentHasDirection =
+        render.content.main.classList.contains(render.classes.dirAbove) ||
+        render.content.main.classList.contains(render.classes.dirBelow)
+      expect(mainHasDirection).toBe(true)
+      expect(contentHasDirection).toBe(true)
     })
   })
 
   describe('close', () => {
     test('close sets the correct attributes and CSS classes', () => {
+      render.open()
       render.close()
 
       expect(render.main.arrow.path.getAttribute('d')).toBe(render.classes.arrowClose)
-      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(false)
-      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(false)
       expect(render.main.main.getAttribute('aria-expanded')).toBe('false')
-      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(false)
-      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(false)
+      expect(render.content.main.classList.contains(render.classes.contentOpen)).toBe(false)
+      // Direction class should persist after close
+      const hasDirection =
+        render.content.main.classList.contains(render.classes.dirAbove) ||
+        render.content.main.classList.contains(render.classes.dirBelow)
+      expect(hasDirection).toBe(true)
     })
   })
 
@@ -200,9 +205,10 @@ describe('render module', () => {
 
       expect(render.main.main.role).toBe('combobox')
       expect(render.main.main.getAttribute('aria-haspopup')).toBe('listbox')
-      expect(render.main.main.getAttribute('aria-controls')).toBe(render.content.main.dataset.id ?? '')
+      expect(render.main.main.getAttribute('aria-controls')).toBe(render.content.list.id)
       expect(render.main.main.getAttribute('aria-expanded')).toBe('false')
-      expect(render.content.main.getAttribute('role')).toBe('listbox')
+      expect(render.content.list.getAttribute('role')).toBe('listbox')
+      expect(render.content.list.getAttribute('aria-label')).toContain('listbox')
     })
   })
 
@@ -235,7 +241,7 @@ describe('render module', () => {
     })
 
     test('arrow key events on main element move highlight', () => {
-      const highlightMock = jest.fn(() => {})
+      const highlightMock = vi.fn(() => {})
 
       render.highlight = highlightMock
 
@@ -316,7 +322,7 @@ describe('render module', () => {
     test('click on deselect on multiple select runs callbacks', () => {
       render.settings.isMultiple = true
 
-      const deselectAllMock = jest.fn()
+      const deselectAllMock = vi.fn()
 
       render.updateDeselectAll = deselectAllMock
 
@@ -333,10 +339,10 @@ describe('render module', () => {
   })
 
   describe('mainFocus', () => {
-    let focusMock: jest.Mock
+    let focusMock: ReturnType<typeof vi.fn>
 
     beforeEach(() => {
-      focusMock = jest.fn(() => {})
+      focusMock = vi.fn(() => {})
       render.main.main.focus = focusMock
     })
 
@@ -485,17 +491,13 @@ describe('render module', () => {
     })
   })
 
-  describe('multipleValue', () => {})
-
-  describe('contentDiv', () => {})
-
   describe('moveContent', () => {
-    let contentAboveMock: jest.Mock
-    let contentBelowMock: jest.Mock
+    let contentAboveMock: ReturnType<typeof vi.fn>
+    let contentBelowMock: ReturnType<typeof vi.fn>
 
     beforeEach(() => {
-      contentAboveMock = jest.fn()
-      contentBelowMock = jest.fn()
+      contentAboveMock = vi.fn()
+      contentBelowMock = vi.fn()
 
       render.moveContentAbove = contentAboveMock
       render.moveContentBelow = contentBelowMock
@@ -526,7 +528,7 @@ describe('render module', () => {
     })
 
     test('content is moved above when putContent is up', () => {
-      render.putContent = jest.fn(() => 'up')
+      render.putContent = vi.fn(() => 'up') as any
 
       render.moveContent()
       expect(contentAboveMock).toHaveBeenCalled()
@@ -534,7 +536,7 @@ describe('render module', () => {
     })
 
     test('content is moved below when putContent is down', () => {
-      render.putContent = jest.fn(() => 'down')
+      render.putContent = vi.fn(() => 'down') as any
 
       render.moveContent()
       expect(contentAboveMock).not.toHaveBeenCalled()
@@ -564,7 +566,7 @@ describe('render module', () => {
 
     test('arrow keys move highlight', () => {
       const search = render.searchDiv()
-      const highlightMock = jest.fn(() => {})
+      const highlightMock = vi.fn(() => {})
 
       render.highlight = highlightMock
 
@@ -596,7 +598,7 @@ describe('render module', () => {
 
     test("enter and space don't call addable witout ctrl key", () => {
       const search = render.searchDiv()
-      const addableMock = jest.fn((s: string) => ({
+      const addableMock = vi.fn((s: string) => ({
         text: s,
         value: s.toLowerCase()
       }))
@@ -611,7 +613,7 @@ describe('render module', () => {
     })
 
     test('enter and space call event and does nothing without input value', () => {
-      const addableMock = jest.fn((s: string) => ({
+      const addableMock = vi.fn((s: string) => ({
         text: s,
         value: s.toLowerCase()
       }))
@@ -626,7 +628,7 @@ describe('render module', () => {
     })
 
     test('enter and space call addable when defined', () => {
-      const addableMock = jest.fn((s: string) => ({
+      const addableMock = vi.fn((s: string) => ({
         text: s,
         value: s.toLowerCase()
       }))
@@ -642,6 +644,64 @@ describe('render module', () => {
       expect(addableMock).toHaveBeenCalledTimes(1)
       expect(addableMock.mock.calls[0]).toStrictEqual(['Search'])
     })
+
+    test('enter selects highlighted option before calling addable', () => {
+      const addableMock = vi.fn((s: string) => ({
+        text: s,
+        value: s.toLowerCase()
+      }))
+
+      render.callbacks.addable = addableMock
+
+      // recreate search because we have added the addable callback
+      render.content.search = render.searchDiv()
+
+      // Render options
+      render.renderOptions(render.store.getDataOptions())
+
+      // Set search value
+      render.content.search.input.value = '1'
+
+      // Highlight first option (simulating arrow down)
+      render.highlight('down')
+
+      // Verify an option is highlighted
+      const highlighted = render.content.list.querySelector('.' + render.classes.highlighted)
+      expect(highlighted).toBeTruthy()
+
+      // Press Enter - should select highlighted option, NOT call addable
+      render.content.search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+
+      // Addable should NOT have been called because an option was highlighted
+      expect(addableMock).not.toHaveBeenCalled()
+    })
+
+    test('enter calls addable when no option is highlighted', () => {
+      const addableMock = vi.fn((s: string) => ({
+        text: s,
+        value: s.toLowerCase()
+      }))
+
+      render.callbacks.addable = addableMock
+
+      // recreate search because we have added the addable callback
+      render.content.search = render.searchDiv()
+
+      // Render options
+      render.renderOptions(render.store.getDataOptions())
+
+      // Set search value
+      render.content.search.input.value = 'NewItem'
+
+      // Do NOT highlight any option (user just types and presses Enter)
+
+      // Press Enter - should call addable since no option is highlighted
+      render.content.search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+
+      // Addable SHOULD have been called
+      expect(addableMock).toHaveBeenCalledTimes(1)
+      expect(addableMock.mock.calls[0]).toStrictEqual(['NewItem'])
+    })
   })
 
   describe('searchFocus', () => {
@@ -1001,8 +1061,6 @@ describe('render module', () => {
     })
   })
 
-  describe('renderOptions', () => {})
-
   describe('option', () => {
     test('add inline styles correctly', () => {
       const option = render.option(
@@ -1080,6 +1138,62 @@ describe('render module', () => {
       expect(option.querySelector('mark')?.textContent).toBe('opt')
     })
 
+    test('text highlighting with special regex characters does not break HTML', () => {
+      render.settings.searchHighlight = true
+      render.content.search.input.value = '<'
+
+      const option = render.option(
+        new Option({
+          text: 'option <test>'
+        })
+      )
+
+      // Should not break the HTML structure
+      expect(option.querySelector('.ss-option')).toBeFalsy() // No nested ss-option divs
+
+      // The < character should be highlighted if found in text
+      const mark = option.querySelector('mark')
+      if (mark) {
+        expect(mark.textContent).toBe('<')
+      }
+    })
+
+    test('text highlighting escapes special regex characters', () => {
+      render.settings.searchHighlight = true
+
+      // Test various special regex characters
+      const specialChars = ['<', '>', '.', '*', '+', '?', '^', '$', '{', '}', '(', ')', '|', '[', ']', '\\']
+
+      specialChars.forEach((char) => {
+        render.content.search.input.value = char
+        const option = render.option(
+          new Option({
+            text: `option ${char} test`
+          })
+        )
+
+        // Should not throw an error and should contain the character
+        expect(option.textContent).toContain(char)
+      })
+    })
+
+    test('text highlighting with HTML content highlights only text nodes', () => {
+      render.settings.searchHighlight = true
+      render.content.search.input.value = 'test'
+
+      const option = render.option(
+        new Option({
+          text: 'test option',
+          html: '<div class="wrapper">test option</div>'
+        })
+      )
+
+      // Should not break HTML structure - the key fix for issue #570
+      expect(option.querySelector('.wrapper')).toBeTruthy() // HTML structure preserved
+      expect(option.querySelector('mark')).toBeTruthy() // Text is highlighted
+      expect(option.querySelector('mark')?.textContent).toBe('test')
+    })
+
     test('click does nothing when option is disabled', () => {
       const option = render.option(
         new Option({
@@ -1142,26 +1256,30 @@ describe('render module', () => {
     })
   })
 
-  describe('range selection', () => {
+  describe('native multi-select behavior', () => {
     let render: Render
-    let afterChangeMock: jest.Mock
+    let afterChangeMock: ReturnType<typeof vi.fn>
+    let closeMock: ReturnType<typeof vi.fn>
 
     beforeEach(() => {
-      // create a new store with 3 options
+      // create a new store with 5 options for comprehensive testing
       const store = new Store('multiple', [
         { text: 'test1', value: 'test1' },
         { text: 'test2', value: 'test2' },
-        { text: 'test3', value: 'test3' }
+        { text: 'test3', value: 'test3' },
+        { text: 'test4', value: 'test4' },
+        { text: 'test5', value: 'test5' }
       ])
 
       const settings = new Settings()
       const classes = new CssClasses()
 
-      afterChangeMock = jest.fn(() => {})
+      afterChangeMock = vi.fn(() => {})
+      closeMock = vi.fn(() => {})
 
       const callbacks = {
         open: () => {},
-        close: () => {},
+        close: closeMock,
         addSelected: () => {},
         setSelected: (value) => {
           store.setSelectedBy('id', typeof value === 'string' ? [value] : value)
@@ -1173,70 +1291,320 @@ describe('render module', () => {
 
       render = new Render(settings, classes, store, callbacks)
       render.settings.isMultiple = true
-      render.settings.closeOnSelect = false
+      render.settings.closeOnSelect = true
     })
 
-    test('click holding shift key selects range from last clicked to current', () => {
-      render.renderOptions(render.store.getDataOptions())
+    describe('Regular Click (no modifiers)', () => {
+      test('toggles option (add/remove) without affecting others', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
 
-      const opts = render.getOptions(false, false, true)
-      expect(opts).toHaveLength(3)
+        // Click first option - adds it
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
 
-      // click on the first option
-      opts[0].dispatchEvent(new MouseEvent('click'))
-      expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
+        // Click third option - adds it (first option still selected)
+        opts[2].dispatchEvent(new MouseEvent('click'))
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
 
-      // click on the last option holding the shift key
-      opts[2].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+        // Click first option again - removes it
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test3' })])
+      })
 
-      // check that also the middle value is selected
-      expect(afterChangeMock).toHaveBeenCalledWith([
-        expect.objectContaining({ value: 'test1' }),
-        expect.objectContaining({ value: 'test2' }),
-        expect.objectContaining({ value: 'test3' })
-      ])
+      test('closes dropdown on regular click when closeOnSelect is true', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        expect(closeMock).toHaveBeenCalled()
+      })
+
+      test('regular click on selected option deselects it and closes dropdown', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Select two options
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        opts[1].dispatchEvent(new MouseEvent('click'))
+
+        expect(afterChangeMock).toHaveBeenLastCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test2' })
+        ])
+        closeMock.mockClear()
+
+        // Click on already selected option - should deselect it and close
+        opts[0].dispatchEvent(new MouseEvent('click'))
+
+        expect(afterChangeMock).toHaveBeenLastCalledWith([expect.objectContaining({ value: 'test2' })])
+        expect(closeMock).toHaveBeenCalledTimes(1)
+      })
+
+      test('regression: regular click adds/removes and closes, Cmd/Ctrl keeps open', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Regular click - should close
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        expect(closeMock).toHaveBeenCalledTimes(1)
+        closeMock.mockClear()
+
+        // Cmd+Click - should NOT close
+        opts[1].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(closeMock).not.toHaveBeenCalled()
+
+        // Ctrl+Click - should NOT close
+        opts[2].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        expect(closeMock).not.toHaveBeenCalled()
+
+        // Regular click again - should close
+        opts[3].dispatchEvent(new MouseEvent('click'))
+        expect(closeMock).toHaveBeenCalledTimes(1)
+      })
     })
 
-    test('click holding shift key selects range from current to last clicked', () => {
-      render.renderOptions(render.store.getDataOptions())
+    describe('Cmd/Ctrl+Click (toggle selection)', () => {
+      test('Cmd+Click adds option without deselecting others (Mac)', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
 
-      const opts = render.getOptions(false, false, true)
-      expect(opts).toHaveLength(3)
+        // Cmd+Click first option
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
 
-      // click on the last option
-      opts[2].dispatchEvent(new MouseEvent('click'))
-      expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test3' })])
+        // Cmd+Click third option - both should be selected
+        opts[2].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
+      })
 
-      // click on the first option holding the shift key
-      opts[0].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+      test('Ctrl+Click adds option without deselecting others (Windows/Linux)', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
 
-      // check that also the middle value is selected
-      expect(afterChangeMock).toHaveBeenCalledWith([
-        expect.objectContaining({ value: 'test3' }),
-        expect.objectContaining({ value: 'test1' }),
-        expect.objectContaining({ value: 'test2' })
-      ])
+        // Ctrl+Click first option
+        opts[0].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
+
+        // Ctrl+Click third option - both should be selected
+        opts[2].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
+      })
+
+      test('Cmd+Click on selected option deselects it (Mac)', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Select multiple options with Cmd
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        opts[1].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        opts[2].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+
+        // Cmd+Click on middle option to deselect it
+        opts[1].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
+      })
+
+      test('Ctrl+Click on selected option deselects it (Windows/Linux)', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Select multiple options with Ctrl
+        opts[0].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        opts[1].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        opts[2].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+
+        // Ctrl+Click on middle option to deselect it
+        opts[1].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
+      })
+
+      test('Cmd+Click toggles selection on and off', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Click to select
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(afterChangeMock).toHaveBeenLastCalledWith([expect.objectContaining({ value: 'test1' })])
+
+        // Click again to deselect
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(afterChangeMock).toHaveBeenLastCalledWith([])
+
+        // Click once more to select again
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(afterChangeMock).toHaveBeenLastCalledWith([expect.objectContaining({ value: 'test1' })])
+      })
+
+      test('Cmd/Ctrl+Click works even when allowDeselect is false', () => {
+        render.settings.allowDeselect = false
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Select with Cmd/Ctrl
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        opts[1].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+
+        // Should be able to deselect with Cmd/Ctrl even though allowDeselect is false
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+
+        expect(afterChangeMock).toHaveBeenLastCalledWith([expect.objectContaining({ value: 'test2' })])
+      })
+
+      test('does NOT close dropdown on Cmd+Click', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        expect(closeMock).not.toHaveBeenCalled()
+      })
+
+      test('does NOT close dropdown on Ctrl+Click', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        opts[0].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        expect(closeMock).not.toHaveBeenCalled()
+      })
     })
 
-    test('range selection is ignored if range length is greater than maxSelected', () => {
-      render.settings.maxSelected = 2
-      render.renderOptions(render.store.getDataOptions())
+    describe('Shift+Click (range selection)', () => {
+      test('selects range from last clicked to current', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
 
-      const opts = render.getOptions(false, false, true)
-      expect(opts).toHaveLength(3)
+        // Click first option
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
 
-      // click on the first option
-      opts[0].dispatchEvent(new MouseEvent('click'))
-      expect(afterChangeMock).toHaveBeenCalledWith([expect.objectContaining({ value: 'test1' })])
+        // Shift+Click third option - should select test1, test2, test3
+        opts[2].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test2' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
+      })
 
-      // click on the last option holding the shift key
-      opts[2].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+      test('selects range in reverse direction', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
 
-      // check that the middle value is NOT selected
-      expect(afterChangeMock).toHaveBeenCalledWith([
-        expect.objectContaining({ value: 'test1' }),
-        expect.objectContaining({ value: 'test3' })
-      ])
+        // Click fourth option
+        opts[3].dispatchEvent(new MouseEvent('click'))
+
+        // Shift+Click second option - should select test2, test3, test4
+        opts[1].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+        expect(afterChangeMock).toHaveBeenCalledWith([
+          expect.objectContaining({ value: 'test4' }),
+          expect.objectContaining({ value: 'test2' }),
+          expect.objectContaining({ value: 'test3' })
+        ])
+      })
+
+      test('respects maxSelected limit', () => {
+        render.settings.maxSelected = 2
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Click first option
+        opts[0].dispatchEvent(new MouseEvent('click'))
+
+        // Shift+Click fourth option - would select 4 items, exceeds limit
+        opts[3].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+
+        // Should keep only the original selection
+        expect(afterChangeMock).toHaveBeenLastCalledWith([expect.objectContaining({ value: 'test1' })])
+      })
+
+      test('does NOT close dropdown on Shift+Click', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        closeMock.mockClear()
+
+        opts[2].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+        expect(closeMock).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('Combined modifier keys', () => {
+      test('Cmd/Ctrl+Click then Shift+Click selects range from last click', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Cmd+Click first and Ctrl+Click third options (testing both)
+        opts[0].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        opts[2].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+
+        // Shift+Click fifth option - should add test3, test4, test5 to selection
+        opts[4].dispatchEvent(new MouseEvent('click', { shiftKey: true }))
+
+        expect(afterChangeMock).toHaveBeenLastCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test3' }),
+          expect.objectContaining({ value: 'test4' }),
+          expect.objectContaining({ value: 'test5' })
+        ])
+      })
+
+      test('can build complex selections like native multi-select (Mac)', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Select test1
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        // Cmd+Add test3
+        opts[2].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        // Cmd+Add test5
+        opts[4].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+        // Cmd+Remove test3
+        opts[2].dispatchEvent(new MouseEvent('click', { metaKey: true }))
+
+        // Final selection should be test1 and test5
+        expect(afterChangeMock).toHaveBeenLastCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test5' })
+        ])
+      })
+
+      test('can build complex selections like native multi-select (Windows/Linux)', () => {
+        render.renderOptions(render.store.getDataOptions())
+        const opts = render.getOptions(false, false, true)
+
+        // Select test1
+        opts[0].dispatchEvent(new MouseEvent('click'))
+        // Ctrl+Add test3
+        opts[2].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        // Ctrl+Add test5
+        opts[4].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+        // Ctrl+Remove test3
+        opts[2].dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+
+        // Final selection should be test1 and test5
+        expect(afterChangeMock).toHaveBeenLastCalledWith([
+          expect.objectContaining({ value: 'test1' }),
+          expect.objectContaining({ value: 'test5' })
+        ])
+      })
     })
   })
 
@@ -1260,11 +1628,10 @@ describe('render module', () => {
     test('correct classes are set', () => {
       render.moveContentAbove()
 
-      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(true)
-      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(false)
-
-      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(true)
-      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(false)
+      expect(render.main.main.classList.contains(render.classes.dirAbove)).toBe(true)
+      expect(render.main.main.classList.contains(render.classes.dirBelow)).toBe(false)
+      expect(render.content.main.classList.contains(render.classes.dirAbove)).toBe(true)
+      expect(render.content.main.classList.contains(render.classes.dirBelow)).toBe(false)
     })
   })
 
@@ -1272,17 +1639,10 @@ describe('render module', () => {
     test('correct classes are set', () => {
       render.moveContentBelow()
 
-      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(false)
-      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(true)
-
-      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(false)
-      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(true)
+      expect(render.main.main.classList.contains(render.classes.dirAbove)).toBe(false)
+      expect(render.main.main.classList.contains(render.classes.dirBelow)).toBe(true)
+      expect(render.content.main.classList.contains(render.classes.dirAbove)).toBe(false)
+      expect(render.content.main.classList.contains(render.classes.dirBelow)).toBe(true)
     })
   })
-
-  describe('ensureElementInView', () => {})
-
-  describe('putContent', () => {})
-
-  describe('updateDeselectAll', () => {})
 })