Merge pull request #711 from The-Commit-Company/700-mentions-are-not-…

…scrolling-when-navigating-via-keyboardweb-app fix(web): scroll to current selected item in mention list
The-Commit-Company · Feb 23, 2024 · ac0d9f3 · ac0d9f3
2 parents 335267d + 045da43
commit ac0d9f3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/raven-app/src/components/feature/chat/ChatInput/ChannelMentionList.tsx b/raven-app/src/components/feature/chat/ChatInput/ChannelMentionList.tsx
@@ -5,6 +5,7 @@ import { ReactRendererOptions } from '@tiptap/react'
 import { clsx } from 'clsx'
 import {
     forwardRef, useEffect, useImperativeHandle,
+    useRef,
     useState,
 } from 'react'
 
@@ -81,10 +82,16 @@ export default forwardRef((props: ReactRendererOptions['props'], ref) => {
 
 const MentionItem = ({ item, index, selectItem, selectedIndex, itemsLength }: { itemsLength: number, selectedIndex: number, index: number, item: ChannelListItem, selectItem: (index: number) => void }) => {
 
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (index === selectedIndex) ref.current?.scrollIntoView({ block: 'nearest' })
+    }, [selectedIndex, index])
 
     return <Flex
         role='button'
         align='center'
+        ref={ref}
         title={item.channel_name}
         aria-label={`Mention channel ${item.channel_name}`}
         className={clsx('px-3 py-2 gap-2 rounded-md',

diff --git a/raven-app/src/components/feature/chat/ChatInput/MentionList.tsx b/raven-app/src/components/feature/chat/ChatInput/MentionList.tsx
@@ -6,6 +6,7 @@ import { ReactRendererOptions } from '@tiptap/react'
 import { clsx } from 'clsx'
 import {
     forwardRef, useEffect, useImperativeHandle,
+    useRef,
     useState,
 } from 'react'
 
@@ -61,7 +62,7 @@ export default forwardRef((props: ReactRendererOptions['props'], ref) => {
             <Flex
                 direction='column'
                 gap='0'
-                className='shadow-lg dark:backdrop-blur-[8px] dark:bg-panel-translucent bg-white overflow-y-scroll max-h-64 rounded-md'
+                className='shadow-lg dark:backdrop-blur-[8px] dark:bg-panel-translucent bg-white overflow-y-scroll max-h-96 rounded-md'
             >
                 {props?.items.length
                     ? props.items.map((item: UserFields, index: number) => (
@@ -85,9 +86,16 @@ const MentionItem = ({ item, index, selectItem, selectedIndex, itemsLength }: {
 
     const isActive = useIsUserActive(item.name)
 
+    const ref = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (index === selectedIndex) ref.current?.scrollIntoView({ block: 'nearest' })
+    }, [selectedIndex, index])
+
 
     return <Flex
         role='button'
+        ref={ref}
         align='center'
         title={item.full_name}
         aria-label={`Mention ${item.full_name}`}