slim-select 3.3.0 → 3.4.0

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

@@ -1658,4 +1658,220 @@ describe('render module', () => {
       expect(render.content.main.classList.contains(render.classes.dirBelow)).toBe(true)
     })
   })
+
+  describe('setContentPosition (via moveContentBelow)', () => {
+    // Helper: mock getBoundingClientRect on an element to return specific values
+    function mockRect(el: HTMLElement, rect: Partial<DOMRect>) {
+      el.getBoundingClientRect = vi.fn(
+        () =>
+          ({
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => {},
+            ...rect
+          }) as DOMRect
+      )
+    }
+
+    test('absolute (default): content aligns below trigger using document coords', () => {
+      // Simulate trigger at viewport (100, 50) with height 40 and width 200
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      // No scroll
+      Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+
+      // top = viewportTop(100) + scrollY(0) + height(40) = 140
+      // left = viewportLeft(50) + scrollX(0) = 50
+      expect(render.content.main.style.top).toBe('140px')
+      expect(render.content.main.style.left).toBe('50px')
+      expect(render.content.main.style.width).toBe('200px')
+    })
+
+    test('absolute: content accounts for page scroll', () => {
+      // Trigger at viewport (100, 50) but page is scrolled down 300px and right 20px
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      Object.defineProperty(window, 'scrollY', { value: 300, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 20, writable: true })
+
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+
+      // top = viewportTop(100) + scrollY(300) + height(40) = 440
+      // left = viewportLeft(50) + scrollX(20) = 70
+      expect(render.content.main.style.top).toBe('440px')
+      expect(render.content.main.style.left).toBe('70px')
+      expect(render.content.main.style.width).toBe('200px')
+    })
+
+    test('absolute: content aligns correctly when trigger is near top of page', () => {
+      // Trigger is at very top, no scroll
+      mockRect(render.main.main, { top: 0, left: 10, height: 30, width: 150 })
+
+      Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+
+      // top = 0 + 0 + 30 = 30
+      // left = 10 + 0 = 10
+      expect(render.content.main.style.top).toBe('30px')
+      expect(render.content.main.style.left).toBe('10px')
+      expect(render.content.main.style.width).toBe('150px')
+    })
+
+    test('fixed: content uses viewport coords without scroll offset', () => {
+      // Same trigger position and scroll as the absolute+scroll test
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      Object.defineProperty(window, 'scrollY', { value: 300, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 20, writable: true })
+
+      render.settings.contentPosition = 'fixed'
+      render.moveContentBelow()
+
+      // Fixed ignores scroll: top = viewportTop(100) + height(40) = 140
+      // left = viewportLeft(50) = 50
+      expect(render.content.main.style.top).toBe('140px')
+      expect(render.content.main.style.left).toBe('50px')
+      expect(render.content.main.style.width).toBe('200px')
+    })
+
+    test('relative: content position styles are not set', () => {
+      mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+
+      render.settings.contentPosition = 'relative'
+
+      // Reset styles to confirm they aren't changed
+      render.content.main.style.top = ''
+      render.content.main.style.left = ''
+      render.content.main.style.width = ''
+
+      render.moveContentBelow()
+
+      // setContentPosition returns early for relative, so no inline positioning
+      expect(render.content.main.style.top).toBe('')
+      expect(render.content.main.style.left).toBe('')
+      expect(render.content.main.style.width).toBe('')
+    })
+
+    test('absolute vs fixed diverge only by scroll offset', () => {
+      const triggerRect = { top: 200, left: 80, height: 36, width: 250 }
+
+      Object.defineProperty(window, 'scrollY', { value: 500, writable: true })
+      Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+
+      // Absolute
+      mockRect(render.main.main, triggerRect)
+      render.settings.contentPosition = 'absolute'
+      render.moveContentBelow()
+      const absTop = render.content.main.style.top
+      const absLeft = render.content.main.style.left
+
+      // Fixed
+      mockRect(render.main.main, triggerRect)
+      render.settings.contentPosition = 'fixed'
+      render.moveContentBelow()
+      const fixedTop = render.content.main.style.top
+      const fixedLeft = render.content.main.style.left
+
+      // Absolute top should be exactly scrollY more than fixed top
+      expect(parseFloat(absTop)).toBe(parseFloat(fixedTop) + 500)
+      // Left should differ by scrollX (which is 0 here, so equal)
+      expect(parseFloat(absLeft)).toBe(parseFloat(fixedLeft))
+    })
+
+    describe('contentWidth setting', () => {
+      beforeEach(() => {
+        mockRect(render.main.main, { top: 100, left: 50, height: 40, width: 200 })
+        Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+        Object.defineProperty(window, 'scrollX', { value: 0, writable: true })
+        render.settings.contentPosition = 'absolute'
+      })
+
+      test('default (empty): width matches trigger', () => {
+        render.settings.contentWidth = ''
+        render.moveContentBelow()
+
+        expect(render.content.main.style.width).toBe('200px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('exact value: sets width to given value', () => {
+        render.settings.contentWidth = '500px'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.width).toBe('500px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('> prefix: sets min-width, no fixed width', () => {
+        render.settings.contentWidth = '>300px'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.minWidth).toBe('300px')
+        expect(render.content.main.style.width).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('< prefix: sets max-width, no fixed width', () => {
+        render.settings.contentWidth = '<600px'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.maxWidth).toBe('600px')
+        expect(render.content.main.style.width).toBe('')
+        expect(render.content.main.style.minWidth).toBe('')
+      })
+
+      test('exact value with percentage', () => {
+        render.settings.contentWidth = '100%'
+        render.moveContentBelow()
+
+        expect(render.content.main.style.width).toBe('100%')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('clears previous width styles when switching modes', () => {
+        // First set min-width
+        render.settings.contentWidth = '>300px'
+        render.moveContentBelow()
+        expect(render.content.main.style.minWidth).toBe('300px')
+
+        // Now switch to exact width — min-width should be cleared
+        render.settings.contentWidth = '500px'
+        render.moveContentBelow()
+        expect(render.content.main.style.width).toBe('500px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+
+      test('clears previous width styles when switching to default', () => {
+        // First set max-width
+        render.settings.contentWidth = '<600px'
+        render.moveContentBelow()
+        expect(render.content.main.style.maxWidth).toBe('600px')
+
+        // Now switch to default — max-width should be cleared, width matches trigger
+        render.settings.contentWidth = ''
+        render.moveContentBelow()
+        expect(render.content.main.style.width).toBe('200px')
+        expect(render.content.main.style.minWidth).toBe('')
+        expect(render.content.main.style.maxWidth).toBe('')
+      })
+    })
+  })
 })

package/src/slim-select/render.ts

@@ -1614,26 +1614,52 @@ export default class Render {
       return
     }
 
+    // getBoundingClientRect() returns viewport-relative coordinates.
     const containerRect = this.main.main.getBoundingClientRect()
     let top: number
     let left: number
 
     if (this.settings.contentPosition === 'fixed') {
-      // Fixed positioning - use viewport coordinates directly
+      // position:fixed is relative to the viewport, so viewport coords work directly.
       top = containerRect.top + containerRect.height
       left = containerRect.left
     } else {
-      // Absolute positioning - calculate relative to offsetParent
-      const offsetParent = this.content.main.offsetParent as HTMLElement
-      const offsetParentRect = offsetParent ? offsetParent.getBoundingClientRect() : { top: 0, left: 0 }
-
-      top = containerRect.top - offsetParentRect.top + containerRect.height - (offsetParent?.clientTop || 0)
-      left = containerRect.left - offsetParentRect.left - (offsetParent?.clientLeft || 0)
+      // position:absolute is relative to the containing block. By default the content
+      // is appended to document.body (static), so the containing block is the initial
+      // containing block (document origin). We must convert viewport coords to document
+      // coords by adding scroll offsets. Using offsetParent subtraction was unreliable
+      // because offsetParent for body children varies across browsers (body vs html)
+      // and body margin caused misalignment.
+      top = containerRect.top + window.scrollY + containerRect.height
+      left = containerRect.left + window.scrollX
     }
 
     this.content.main.style.top = top + 'px'
     this.content.main.style.left = left + 'px'
-    this.content.main.style.width = containerRect.width + 'px'
+
+    // Apply content width based on contentWidth setting
+    // ""           → width matches trigger (default/current behavior)
+    // "500px"      → exact width of 500px
+    // ">500px"     → min-width of 500px, width auto (content can grow)
+    // "<500px"     → max-width of 500px, width auto (content can shrink)
+    const cw = this.settings.contentWidth
+    this.content.main.style.width = ''
+    this.content.main.style.minWidth = ''
+    this.content.main.style.maxWidth = ''
+
+    if (!cw) {
+      // Default: match trigger width exactly
+      this.content.main.style.width = containerRect.width + 'px'
+    } else if (cw.startsWith('>')) {
+      // Min-width mode: at least this wide, can grow to fit content
+      this.content.main.style.minWidth = cw.slice(1)
+    } else if (cw.startsWith('<')) {
+      // Max-width mode: no wider than this, content wraps if longer
+      this.content.main.style.maxWidth = cw.slice(1)
+    } else {
+      // Exact width
+      this.content.main.style.width = cw
+    }
   }
 
   public moveContentAbove(): void {

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

@@ -36,7 +36,8 @@ const defaultSettings: { [key: string]: any } = {
   maxSelected: 1000,
   timeoutDelay: 200,
   maxValuesShown: 20,
-  maxValuesMessage: '{number} selected'
+  maxValuesMessage: '{number} selected',
+  contentWidth: ''
 }
 
 describe('Settings module', () => {

package/src/slim-select/settings.ts

@@ -25,6 +25,7 @@ export default class Settings {
   public closeOnSelect: boolean
   public contentLocation: HTMLElement | null
   public contentPosition: 'relative' | 'absolute' | 'fixed'
+  public contentWidth: string
   public openPosition: 'auto' | 'up' | 'down'
   public placeholderText: string
   public allowDeselect: boolean
@@ -60,6 +61,7 @@ export default class Settings {
     this.closeOnSelect = settings.closeOnSelect !== undefined ? settings.closeOnSelect : true
     this.contentLocation = settings.contentLocation || document.body
     this.contentPosition = settings.contentPosition || 'absolute'
+    this.contentWidth = settings.contentWidth || ''
     this.openPosition = settings.openPosition || 'auto' // options: auto, up, down
     this.placeholderText = settings.placeholderText !== undefined ? settings.placeholderText : 'Select Value'
     this.allowDeselect = settings.allowDeselect !== undefined ? settings.allowDeselect : false