draft-js-plugins - Draftjs 提到了带有滚动条的插件

Question

问题是当提及列表弹出有滚动时 keydown/keyup 不起作用，我可以使用鼠标滚动但 keyup/keydown 没有使滚动移动到正确的位置

Answer 1

这可以通过自定义入口 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>
     </> );
   };