CODEWITHSUNDEEP
javascriptreactjsrsuite
Chuddy
Chuddy

Reputation: 11

React + Rsuite dropdown: prevent page from scrolling down when dropdown items go off screen

I'm making a chrome extension using react. In my app I'm using the Rsuite Dropdown component. I'm using nested menus with lots of items, so on some of the menus the list of items in the dropdown extends past the screen. The issue is that I hover over the menu, the dropdown opens, it extends past the screen, the window scrolls to the bottom of the dropdown, my mouse is now shifted off of the menu selector so the dropdown closes and the window scrolls back up. My goal is to have the dropdown open without the window scrolling down to the bottom. Gif of problem

My Code:

I just have one component in my App.js, which is just a dropdown of all my bookmarks

<Dropdown title="Bookmarks">
      {bookmarks.map((mark) => {
          return (mark.children === undefined ? <BookmarkItem Bookmark={mark}/> : <BookmarkFolder Bookmarks={mark}/>)
      })}
  </Dropdown>

For all the bookmarks, I check if its a folder or an actual bookmark, if its a folder, I insert a folder component (which does this exact thing recursively)

const BookmarkFolder = ({Bookmarks}) => {

return (
    <Dropdown.Menu title={Bookmarks.title}>
        {Bookmarks.children.map((mark) => {
            return (mark.children === undefined ? <BookmarkItem Bookmark={mark}/> : <BookmarkFolder Bookmarks={mark}/>)
        })}
    </Dropdown.Menu>
);

};

If its a bookmark, I display the bookmark title as a dropdown item

/* Limit title length to 25 characters */
const limitLength = (title) => {
    if (title.length > 25) {
        return `${title.substring(0, 22)}...`;
    }
    else {
        return title;
    }
}

return (
    <Dropdown.Item>
        {limitLength(Bookmark.title)}
    </Dropdown.Item>
);

I've been trying to programmatically scroll the page up when a bookmark item renders:

useEffect(() => {
    window.setTimeout(() => window.scrollTo(0,0), 500);
}, []);

But this isn't working.

Help is greatly appreciated!

Upvotes: 1

Views: 570

Answers (0)

Related Questions