fix(SelectV2): scroll element into view when using arrow keys

This makes sure that we don't use the native element scrolling
behavior but rather scroll to an element when it's getting
focussed. This makes the scrolling behavior using arrow keys a bit
nicer.

Author: glenngijsberts

src/components/SelectV2/DesktopDropdown.tsx

@@ -145,12 +145,34 @@ export const DesktopDropdown = ({
               setFocussed(options.length - 1)
               break
             case 'ArrowUp':
-              setFocussed(focussed => Math.max(0, focussed - 1))
+              event.preventDefault()
+
+              setFocussed(previousFocussed => {
+                const focussed = Math.max(0, previousFocussed - 1)
+
+                scrollIntoView(listbox.children[focussed], {
+                  boundary: listbox,
+                  scrollMode: 'always',
+                  block: 'nearest',
+                })
+
+                return focussed
+              })
               break
             case 'ArrowDown':
-              setFocussed(focussed =>
-                Math.min(options.length - 1, focussed + 1)
-              )
+              event.preventDefault()
+
+              setFocussed(prevFocussed => {
+                const focussed = Math.min(options.length - 1, prevFocussed + 1)
+
+                scrollIntoView(listbox.children[focussed], {
+                  boundary: listbox,
+                  scrollMode: 'always',
+                  block: 'nearest',
+                })
+
+                return focussed
+              })
               break
             case 'Escape':
               setOpen(false)