Clicking on context menu for a video in library list sometimes results in execution of random action #7326

New issue

Closed

opened 2021-12-06 08:34:50 +01:00 by Vort · 6 comments

Vort commented

2021-12-06 08:34:50 +01:00

(Migrated from github.com)

Bug
Sometimes when I click on context menu button instead of just opening menu, list jumps somewhere and on releasing of mouse button random action gets performed.

To Reproduce
Steps to reproduce the behavior:

View several video to fill Library tab.
Go to Library tab.
Click on context menu button next to some of the videos in list.

Expected behavior
Context menu opens.

Screenshots
Here is the video for this problem:
lbry://@Vort#1/lbry_library_list_glitch#c

System Configuration

**Bug** Sometimes when I click on context menu button ![image](https://user-images.githubusercontent.com/1242858/144805281-078a682e-84cf-4a2c-9170-8a0012656bc0.png) instead of just opening menu, list jumps somewhere and on releasing of mouse button random action gets performed. **To Reproduce** Steps to reproduce the behavior: 1. View several video to fill Library tab. 2. Go to Library tab. 3. Click on context menu button next to some of the videos in list. **Expected behavior** Context menu opens. **Screenshots** Here is the video for this problem: `lbry://@Vort#1/lbry_library_list_glitch#c` **System Configuration** ![image](https://user-images.githubusercontent.com/1242858/144760692-2b49a422-04d0-4321-9245-899492d1d777.png)

jessopb commented

2021-12-06 18:00:06 +01:00

(Migrated from github.com)

Thank you - are you on the LBRY foundation discord? https://chat.lbry.com

Vort commented

2021-12-06 18:06:19 +01:00

(Migrated from github.com)

are you on the LBRY foundation discord? https://chat.lbry.com

No, my IP is banned from Discord.
But it is possible to find other communication channels if needed.
Or it is fine to chat right here.

> are you on the LBRY foundation discord? https://chat.lbry.com No, my IP is banned from Discord. But it is possible to find other communication channels if needed. Or it is fine to chat right here.

kornatskyi commented

2021-12-08 01:30:15 +01:00

(Migrated from github.com)

Solutions I consider are:

Prevent window from scrolling down when dropdown doesn't fit
Or make dropdown show up on release event. I see that all dropdowns in the app show up on the press events. I checked a couple of websites (youtube, github, google, etc.) and they all do dropdowns show up on release.

May I take this issue?

I was able to reproduce this bug. 2 things to this bug. The first is on small window sizes when the dropdown doesn't fit into the window it scrolls the window down to the position when the dropdown fits in. The second is if you press a context menu (three dots) button without releasing left-click and then release it on the dropdown's filed it will press (trigger) this field. Solutions I consider are: 1. Prevent window from scrolling down when dropdown doesn't fit 2. Or make dropdown show up on release event. I see that all dropdowns in the app show up on the press events. I checked a couple of websites (youtube, github, google, etc.) and they all do dropdowns show up on release. May I take this issue?

jessopb commented

2021-12-08 01:33:43 +01:00

(Migrated from github.com)

Good point on the dropdowns. Please do. Let me know if you have questions.

Vort commented

2021-12-08 07:29:09 +01:00

(Migrated from github.com)

The second is if you press a context menu (three dots) button without releasing left-click and then release it on the dropdown's filed it will press (trigger) this field.

I thought it's a feature.
You need to perform less actions to achieve the same goal.
But since it makes problems and it is common on other websites to not use such approach, then, maybe, it is ok to bind action to release instead.

> The second is if you press a context menu (three dots) button without releasing left-click and then release it on the dropdown's filed it will press (trigger) this field. I thought it's a feature. You need to perform less actions to achieve the same goal. But since it makes problems and it is common on other websites to not use such approach, then, maybe, it is ok to bind action to release instead.

kornatskyi commented

2021-12-08 08:09:12 +01:00

(Migrated from github.com)

I thought it's a feature.

At first, I thought so too. But then after checking other apps realized that it's probably not the best way to do dropdowns.
This app is using @reach/menu-button for that component and I actually find the same issue people were discussing here but they didn't really fix this issue. Also, a weird thing is that this button works even on the right mouse press, which is not how it should be I think.
Here is a solution that I have so far. I would like to maybe hear some feedback first from someone, before doing a pull request.
I will remove comments before a pull request.


// .....


  let isEventSimulated = false; // indicates when to execute preventDefault depending on mouseDown event was simulated or not
  const menuButtonHandler = (e) => {
    if (!isEventSimulated && e.type === "mousedown") {
      e.preventDefault(); // prevent MenuButton from showing a dropdown on mouseDown when the button pressed
    } else if (e.type === "click") {
      isEventSimulated = true;
      e.target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true })); // simulate mouseDown event to trigger default behavior(show dropdown)
      isEventSimulated = false; // resetting the boolean value to false
    }
  };

  return (
    <Menu>
      <MenuButton
        className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
        onMouseDown={menuButtonHandler} // added this line
        onClick={(e) => {
          e.stopPropagation();
          e.preventDefault();
          menuButtonHandler(e); // and this
        }}
      >
        <Icon size={20} icon={ICONS.MORE_VERTICAL} />
      </MenuButton>

//....

> I thought it's a feature. At first, I thought so too. But then after checking other apps realized that it's probably not the best way to do dropdowns. This app is using `@reach/menu-button` for that component and I actually find the same issue people were discussing [here](https://github.com/reach/reach-ui/issues/563) but they didn't really fix this issue. Also, a weird thing is that this button works even on the right mouse press, which is not how it should be I think. Here is a solution that I have so far. I would like to maybe hear some feedback first from someone, before doing a pull request. I will remove comments before a pull request. ```javascript // ..... let isEventSimulated = false; // indicates when to execute preventDefault depending on mouseDown event was simulated or not const menuButtonHandler = (e) => { if (!isEventSimulated && e.type === "mousedown") { e.preventDefault(); // prevent MenuButton from showing a dropdown on mouseDown when the button pressed } else if (e.type === "click") { isEventSimulated = true; e.target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true })); // simulate mouseDown event to trigger default behavior(show dropdown) isEventSimulated = false; // resetting the boolean value to false } }; return ( <Menu> <MenuButton className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })} onMouseDown={menuButtonHandler} // added this line onClick={(e) => { e.stopPropagation(); e.preventDefault(); menuButtonHandler(e); // and this }} > <Icon size={20} icon={ICONS.MORE_VERTICAL} /> </MenuButton> //.... ```