spirosikmd Github contribution chart
spirosikmd Github Stats
spirosikmd Most Used Languages

Activity

07 Oct 2022

Issue Comment

Spirosikmd

MenuLists in portals cause page to scroll with React 18

🐛 Bug report

Current Behavior

When rendering menu buttons that open menu lists on slightly long pages, opening a menu after scrolling down a bit often causes the page to scroll farther down. This only happens when rendering the menu lists inside portals, and when using React 18.

This screen recording shows the behavior happening in the reproducible example.

Expected behavior

The menu should open without any change in the page's scroll position.

Reproducible example

Example in Code Sandbox

Your environment

| Software | Name(s) | Version | | ---------------- | ------- | ------- | | Reach Package | menu-button | 0.17.0 | | React | react | 18.2.0 | | Browser | Chrome | 104.0.5112.79 | | Browser | Firefox | 103.0.1 | | Assistive tech | - | - | | Node | - | - | | npm/yarn | - | - | | Operating System | MacOS | 12.4 |

Forked On 07 Oct 2022 at 07:24:12

Spirosikmd

The only potential issue I see is that in development, I see a warning from the reach-rect package when I open the menu: You need to place the ref. I am unsure whether this causes any issues. The menus behave as expected as far as I can see.

Commented On 07 Oct 2022 at 07:24:12
Issue Comment

Spirosikmd

Not possible to set width smaller than 275 due to min width property

The styling guide suggests is possible to set the width of the player like so:

vm-player {
  --vm-settings-width: 100px;
} 

But this is misleading because due to a min-width property the player can never be smaller than 275px wide.

https://github.com/vime-js/vime/blob/1e8f386a46df47e7bcef408ceb5e116ca9a513e8/packages/core/src/components/core/player/player.css#L23

I tried a few ways to override this css property, for example

.player {
    min-width: 100px !important!
} 

But this did not seem to work which I suspect is due to the constructed stylesheet / shadow DOM usage.

I am working in React.

If this is a bug, please update the code to take the width property into effect when setting min-width. Otherwise, if I should be able to set the css using .player class or similar, please provide an example.

Forked On 05 Oct 2022 at 07:36:43

Spirosikmd

@younes0, you are right! This solution doesn't always work. During the first couple of renders, the ref.current.shadowRoot element is undefined. In subsequent renders, vimejs renders this part in the DOM, and the ref.current.shadowRoot expression correctly returns the shadow root. I am not saying that's the best way to do it. But so far, this solution has worked for me.

Commented On 05 Oct 2022 at 07:36:43

Spirosikmd

started

Started On 03 Oct 2022 at 08:35:29

Spirosikmd

started

Started On 23 Sep 2022 at 12:25:59
Issue Comment

Spirosikmd

MenuLists in portals cause page to scroll with React 18

🐛 Bug report

Current Behavior

When rendering menu buttons that open menu lists on slightly long pages, opening a menu after scrolling down a bit often causes the page to scroll farther down. This only happens when rendering the menu lists inside portals, and when using React 18.

This screen recording shows the behavior happening in the reproducible example.

Expected behavior

The menu should open without any change in the page's scroll position.

Reproducible example

Example in Code Sandbox

Your environment

| Software | Name(s) | Version | | ---------------- | ------- | ------- | | Reach Package | menu-button | 0.17.0 | | React | react | 18.2.0 | | Browser | Chrome | 104.0.5112.79 | | Browser | Firefox | 103.0.1 | | Assistive tech | - | - | | Node | - | - | | npm/yarn | - | - | | Operating System | MacOS | 12.4 |

Forked On 03 Sep 2022 at 02:11:04

Spirosikmd

One way to fix this issue before the team releases the patch is to use a function to render the Menu's children and only render the MenuList when isExpanded is true.

<Menu>
  {({ isExpanded }) => (
    <>
      <MenuButton>Actions</MenuButton>
      {isExpanded ? (
        <MenuList portal>
          <MenuItem onSelect={() => alert("Download")}>Download</MenuItem>
          <MenuItem onSelect={() => alert("Copy")}>Create a Copy</MenuItem>
          <MenuItem onSelect={() => alert("Delete")}>Delete</MenuItem>
          <MenuLink as="a" href="https://reacttraining.com/workshops/">
            Attend a Workshop
          </MenuLink>
        </MenuList>
      ) : null}
  </>
)}
</Menu> 

Note that I have this issue with or without using the portal prop in the MenuList.

Commented On 03 Sep 2022 at 02:11:04