@furystack/shades-common-components 14.0.0 → 15.0.1

package/src/components/rating.spec.tsx

@@ -588,7 +588,7 @@ describe('Rating', () => {
       })
     })
 
-    it('should increase value with ArrowUp', async () => {
+    it('should not change value with ArrowUp (reserved for spatial navigation)', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onchange = vi.fn()
@@ -606,11 +606,11 @@ describe('Rating', () => {
 
         await flushUpdates()
 
-        expect(onchange).toHaveBeenCalledWith(3)
+        expect(onchange).not.toHaveBeenCalled()
       })
     })
 
-    it('should decrease value with ArrowDown', async () => {
+    it('should not change value with ArrowDown (reserved for spatial navigation)', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onchange = vi.fn()
@@ -628,7 +628,7 @@ describe('Rating', () => {
 
         await flushUpdates()
 
-        expect(onchange).toHaveBeenCalledWith(2)
+        expect(onchange).not.toHaveBeenCalled()
       })
     })
 
@@ -863,4 +863,199 @@ describe('Rating', () => {
       })
     })
   })
+
+  describe('spatial navigation integration', () => {
+    it('should set data-spatial-nav-target on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.hasAttribute('data-spatial-nav-target')).toBe(true)
+      })
+    })
+
+    it('should not set data-spatial-nav-target when readOnly', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} readOnly />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.hasAttribute('data-spatial-nav-target')).toBe(false)
+      })
+    })
+
+    it('should not set data-spatial-nav-target when disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} disabled />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.hasAttribute('data-spatial-nav-target')).toBe(false)
+      })
+    })
+
+    it('should set aria-orientation to horizontal', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.getAttribute('aria-orientation')).toBe('horizontal')
+      })
+    })
+
+    it('should not preventDefault on ArrowRight when at max value', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={5} max={5} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).not.toHaveBeenCalled()
+        expect(event.defaultPrevented).toBe(false)
+      })
+    })
+
+    it('should not preventDefault on ArrowLeft when at min value', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={0} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).not.toHaveBeenCalled()
+        expect(event.defaultPrevented).toBe(false)
+      })
+    })
+
+    it('should preventDefault on ArrowRight when value can increase', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} max={5} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).toHaveBeenCalledWith(4)
+        expect(event.defaultPrevented).toBe(true)
+      })
+    })
+
+    it('should preventDefault on ArrowLeft when value can decrease', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).toHaveBeenCalledWith(2)
+        expect(event.defaultPrevented).toBe(true)
+      })
+    })
+
+    it('should not preventDefault on ArrowUp or ArrowDown', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+
+        const upEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(upEvent)
+
+        const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(downEvent)
+
+        await flushUpdates()
+
+        expect(onchange).not.toHaveBeenCalled()
+        expect(upEvent.defaultPrevented).toBe(false)
+        expect(downEvent.defaultPrevented).toBe(false)
+      })
+    })
+  })
 })

package/src/components/rating.tsx

@@ -114,8 +114,7 @@ export const Rating = Shade<RatingProps>({
 
     '&:focus-visible': {
       outline: 'none',
-      boxShadow: cssVariableTheme.action.focusRing,
-      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+      boxShadow: `0 0 0 2px ${cssVariableTheme.palette.primary.main} inset`,
     },
 
     '&[data-size="small"] .rating-star': {
@@ -159,46 +158,53 @@ export const Rating = Shade<RatingProps>({
     useHostProps({
       'data-size': props.size || 'medium',
       style: { '--rating-color': color },
+      ...(isInteractive ? { 'data-spatial-nav-target': '' } : {}),
       ...(props.disabled ? { 'data-disabled': '', 'aria-disabled': 'true' } : {}),
       ...(props.readOnly ? { 'data-readonly': '', 'aria-readonly': 'true' } : {}),
       ...(isInteractive
         ? {
             role: 'slider',
-            tabindex: '0',
+            tabIndex: 0,
             'aria-valuenow': String(value),
             'aria-valuemin': '0',
             'aria-valuemax': String(max),
             'aria-label': 'Rating',
+            'aria-orientation': 'horizontal',
             onkeydown: (ev: KeyboardEvent) => {
               const step = precision === 0.5 ? 0.5 : 1
-              let newValue: number
 
               switch (ev.key) {
-                case 'ArrowRight':
-                case 'ArrowUp':
-                  ev.preventDefault()
-                  newValue = Math.min(value + step, max)
-                  break
-                case 'ArrowLeft':
-                case 'ArrowDown':
-                  ev.preventDefault()
-                  newValue = Math.max(value - step, 0)
-                  break
+                case 'ArrowRight': {
+                  const newValue = Math.min(value + step, max)
+                  if (newValue !== value) {
+                    ev.preventDefault()
+                    props.onValueChange?.(newValue)
+                  }
+                  return
+                }
+                case 'ArrowLeft': {
+                  const newValue = Math.max(value - step, 0)
+                  if (newValue !== value) {
+                    ev.preventDefault()
+                    props.onValueChange?.(newValue)
+                  }
+                  return
+                }
                 case 'Home':
                   ev.preventDefault()
-                  newValue = 0
-                  break
+                  if (value !== 0) {
+                    props.onValueChange?.(0)
+                  }
+                  return
                 case 'End':
                   ev.preventDefault()
-                  newValue = max
-                  break
+                  if (value !== max) {
+                    props.onValueChange?.(max)
+                  }
+                  return
                 default:
                   return
               }
-
-              if (newValue !== value) {
-                props.onValueChange?.(newValue)
-              }
             },
           }
         : {

package/src/components/suggest/index.spec.tsx

@@ -200,13 +200,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true })
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         Object.defineProperty(arrowDownEvent, 'target', { value: input })
         wrapper?.dispatchEvent(arrowDownEvent)
 
@@ -243,18 +241,16 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true })
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
         Object.defineProperty(arrowDownEvent, 'target', { value: input })
         wrapper?.dispatchEvent(arrowDownEvent)
         wrapper?.dispatchEvent(arrowDownEvent)
 
-        const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true })
+        const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
         Object.defineProperty(arrowUpEvent, 'target', { value: input })
         wrapper?.dispatchEvent(arrowUpEvent)
 
@@ -290,13 +286,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
         wrapper?.dispatchEvent(enterEvent)
 
@@ -332,13 +326,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true, cancelable: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
 
         const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault')
@@ -348,7 +340,7 @@ describe('Suggest', () => {
       })
     })
 
-    it('should prevent default on ArrowUp key', async () => {
+    it('should prevent default on ArrowUp key when suggestions are open', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onSelectSuggestion = vi.fn()
@@ -372,8 +364,11 @@ describe('Suggest', () => {
         const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await advanceTimers(300)
 
-        const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, cancelable: true })
+        const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })
         Object.defineProperty(arrowUpEvent, 'target', { value: input })
 
         const preventDefaultSpy = vi.spyOn(arrowUpEvent, 'preventDefault')
@@ -383,7 +378,7 @@ describe('Suggest', () => {
       })
     })
 
-    it('should prevent default on ArrowDown key', async () => {
+    it('should prevent default on ArrowDown key when suggestions are open', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onSelectSuggestion = vi.fn()
@@ -407,8 +402,11 @@ describe('Suggest', () => {
         const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'First'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await advanceTimers(300)
 
-        const arrowDownEvent = new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
         Object.defineProperty(arrowDownEvent, 'target', { value: input })
 
         const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault')
@@ -418,6 +416,39 @@ describe('Suggest', () => {
       })
     })
 
+    it('should not prevent default on arrow keys when dropdown is closed', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
+        const input = suggest?.querySelector('input') as HTMLInputElement
+
+        const arrowDownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        Object.defineProperty(arrowDownEvent, 'target', { value: input })
+        const preventDefaultSpy = vi.spyOn(arrowDownEvent, 'preventDefault')
+        wrapper?.dispatchEvent(arrowDownEvent)
+
+        expect(preventDefaultSpy).not.toHaveBeenCalled()
+      })
+    })
+
     it('should not move selection below 0', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
@@ -442,9 +473,12 @@ describe('Suggest', () => {
         const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
+        input.value = 'test'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await advanceTimers(300)
 
         for (let i = 0; i < 5; i++) {
-          const arrowUpEvent = new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true })
+          const arrowUpEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
           Object.defineProperty(arrowUpEvent, 'target', { value: input })
           wrapper?.dispatchEvent(arrowUpEvent)
         }
@@ -616,14 +650,11 @@ describe('Suggest', () => {
         await advanceTimers(50)
 
         const suggest = document.querySelector('shade-suggest') as HTMLElement
-        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
@@ -658,14 +689,11 @@ describe('Suggest', () => {
         await advanceTimers(50)
 
         const suggest = document.querySelector('shade-suggest') as HTMLElement
-        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
@@ -698,14 +726,11 @@ describe('Suggest', () => {
         await advanceTimers(50)
 
         const suggest = document.querySelector('shade-suggest') as HTMLElement
-        const wrapper = suggest?.querySelector('.suggest-wrapper') as HTMLElement
 
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'test'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
@@ -742,13 +767,11 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
         wrapper?.dispatchEvent(enterEvent)
 
@@ -784,15 +807,13 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
         input.value = 'First'
 
-        const keyupEvent = new KeyboardEvent('keyup', { key: 'a', bubbles: true })
-        Object.defineProperty(keyupEvent, 'target', { value: input })
-        wrapper?.dispatchEvent(keyupEvent)
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)
 
         expect(suggest?.hasAttribute('data-opened')).toBe(true)
 
-        const enterEvent = new KeyboardEvent('keyup', { key: 'Enter', bubbles: true })
+        const enterEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
         Object.defineProperty(enterEvent, 'target', { value: input })
         wrapper?.dispatchEvent(enterEvent)
 
@@ -883,6 +904,89 @@ describe('Suggest', () => {
     })
   })
 
+  describe('spatial navigation attributes', () => {
+    it('should have data-spatial-nav-target on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        expect(suggest.hasAttribute('data-spatial-nav-target')).toBe(true)
+      })
+    })
+
+    it('should have tabIndex of -1 on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        expect(suggest.tabIndex).toBe(-1)
+      })
+    })
+
+    it('should delegate focus to the inner input when the host is focused', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onSelectSuggestion = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Suggest<TestEntry>
+              defaultPrefix="🔍"
+              getEntries={getTestEntries}
+              getSuggestionEntry={getSuggestionEntry}
+              onSelectSuggestion={onSelectSuggestion}
+            />
+          ),
+        })
+
+        await advanceTimers(50)
+
+        const suggest = document.querySelector('shade-suggest') as HTMLElement
+        const input = suggest.querySelector('input') as HTMLInputElement
+
+        suggest.dispatchEvent(new FocusEvent('focus', { bubbles: false }))
+
+        await advanceTimers(10)
+
+        expect(document.activeElement).toBe(input)
+      })
+    })
+  })
+
   describe('synchronous suggestions mode', () => {
     it('should render with string[] suggestions', async () => {
       await usingAsync(new Injector(), async (injector) => {
@@ -956,7 +1060,7 @@ describe('Suggest', () => {
         const input = suggest?.querySelector('input') as HTMLInputElement
 
         input.value = 'ap'
-        input.dispatchEvent(new KeyboardEvent('keyup', { key: 'p', bubbles: true }))
+        input.dispatchEvent(new Event('input', { bubbles: true }))
 
         await advanceTimers(300)