Draftjs mentions plugin with scroll

Question

The issue is keydown/keyup aren't working when mention list popup has scroll , i can scroll using mouse but keyup/keydown aren't making the scroll move to the right position

Answer 1

This can be achieved by custom entry Component ->

   const entryComponent = (props:any) => {
   const { mention, isFocused, searchValue, ...parentProps } = props;
   const entryRef = React.useRef<HTMLDivElement>(null);

   useEffect(() => {
    if (isFocused) {
     if (entryRef.current && entryRef.current.parentElement) {
      entryRef.current.scrollIntoView({
        block: 'nearest',
        inline: 'center',
        behavior: 'auto'
      });
    }} 
   }, [isFocused]);


   return (
    <>      
    <div
      ref={entryRef}
      role='option'
      aria-selected={(isFocused ? 'true' : 'false')}
      {...parentProps}>

      <div className={'mentionStyle'}>
        {mention.name}
      </div>
     </div>
     </> );
   };