Bug 1723254 - Kebab actions for resources lists does not work for the last row
Summary: Kebab actions for resources lists does not work for the last row
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.2.0
Hardware: Unspecified
OS: Unspecified
Target Milestone: ---
: 4.3.0
Assignee: cvogt
QA Contact: Yadan Pei
: 1726989 1760433 1779649 1782825 1804287 (view as bug list)
Depends On:
TreeView+ depends on / blocked
Reported: 2019-06-24 03:37 UTC by XiaochuanWang
Modified: 2020-03-18 14:07 UTC (History)
10 users (show)

Fixed In Version:
Doc Type: Bug Fix
Doc Text:
Cause: Kebab menu always opened down and was parented to the scrollable list itself. Therefore it was subjected to being clipped by a parent DOM node with an `overflow` style. Consequence: The kebab menu for the last list item was often clipped and the user could not see all the items. Fix: The kebab menu is now parented to the document body ensuring it cannot be clipped by a scrollable parent node. It also smartly determines its position; whether to open up or down. Result: The kebab menu will always be visible. In some cases the kebab menu will open upwards to ensure it remains visible in its entirety.
Clone Of:
Last Closed: 2020-01-23 11:04:11 UTC
Target Upstream Version:

Attachments (Terms of Use)
project kebab list actions (29.04 KB, image/png)
2019-06-24 03:37 UTC, XiaochuanWang
no flags Details

System ID Private Priority Status Summary Last Updated
Github openshift console pull 3370 0 'None' closed Bug 1723254: use Popper to parent kebab menu to body 2020-03-18 14:02:18 UTC
Red Hat Product Errata RHBA-2020:0062 0 None None None 2020-01-23 11:04:41 UTC

Description XiaochuanWang 2019-06-24 03:37:00 UTC
Created attachment 1583837 [details]
project kebab list actions

Description of problem:
Cluster admin check Projects list and Namespaces list, both kebab buttons are truncated for the last project/namespace.

Version-Release number of selected component (if applicable):
Latest commit of Console: 3829040ef07c2a6ac8111e04b8e8f2515a089763

How reproducible:

Steps to Reproduce:
1. Go to Projects list, check the kebab list for the last project in the bottom.
2. Go to Namespaces list, check the kebab list for the last Namespace in the bottom.

Actual results:
Both step 1&2, there is only "Edit Labels" button.

Expected results:
Both step 1&2, should display well.

Additional info:

Comment 1 Robb Hamilton 2019-06-24 12:42:26 UTC
Xiaochuan, in trying to reproduce the bug, I am able to scroll to reveal both dropdown options.  Is that not the case for you?  Note this should not be a new behavior.  It's possible the scrolling is worse than before due changes of all tables (see https://github.com/openshift/console/pull/1465), but Patrick has a PR in progress to address (see https://github.com/openshift/console/pull/1750).

Comment 2 Samuel Padgett 2019-06-24 13:36:46 UTC
Having to scroll after opening the kebab for the last row isn't ideal, but I think it's reasonable if all the items can be clicked. Xiaochuan, can you let us know if you're able to scroll to click the last item?

As Robb notes, this should be made better by https://github.com/openshift/console/pull/1750

Comment 3 XiaochuanWang 2019-06-25 02:57:31 UTC
Samuel, after clicked the Kebab button and scrolled down, I still can not get the following buttons from the Kebab list. 
This is different than 4.1 which will be able to get the whole buttons by rolling out extra empty lines at the bottom of the screen.

Comment 4 XiaochuanWang 2019-06-25 05:32:37 UTC
It's related to Browser, reproduced on Firefox 64 and 67, not on Chrome 72.

Comment 5 Samuel Padgett 2019-07-05 14:59:02 UTC
*** Bug 1726989 has been marked as a duplicate of this bug. ***

Comment 6 Samuel Padgett 2019-07-30 12:43:44 UTC
This was addressed in https://github.com/openshift/console/pull/1750

Comment 8 XiaochuanWang 2019-08-01 06:00:10 UTC
This has been fixed, namespaces list and projects list does not reproduce it now.
Verified on 4.2.0-0.nightly-2019-07-31-162901

Comment 9 Yadan Pei 2019-09-18 01:59:23 UTC
The kebab action menus can't be selected when kebab list height exceed the bottom, scroll down doesn't work

Reproduces on 4.2.0-0.nightly-2019-09-17-001320

In our trying, the issue reproduces on FF69 & Chrome 75 while FF68 & Chrome 77 don't have

Comment 10 Samuel Padgett 2019-09-18 13:14:38 UTC
I can reproduce on Firefox 69

Comment 11 Robb Hamilton 2019-09-26 18:53:32 UTC
It appears this is a known issue with React Virtualized and React Virtualized creator, Brian Vaughn, recommends https://github.com/tajo/react-portal as the fix.  See https://stackoverflow.com/a/43331841, https://stackoverflow.com/a/47334746.

Comment 12 Samuel Padgett 2019-10-10 16:04:14 UTC
*** Bug 1760433 has been marked as a duplicate of this bug. ***

Comment 15 XiaochuanWang 2019-11-15 03:01:05 UTC
Checked on Firefox 70 and Chrome 78, both are not reproduced. Kebab action drop-down list for the last item are now drop-UP.
Tested on 4.3.0-0.nightly-2019-11-13-233341

Comment 16 Samuel Padgett 2019-12-04 17:45:56 UTC
*** Bug 1779649 has been marked as a duplicate of this bug. ***

Comment 17 Samuel Padgett 2019-12-12 13:53:36 UTC
*** Bug 1782825 has been marked as a duplicate of this bug. ***

Comment 19 errata-xmlrpc 2020-01-23 11:04:11 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory, and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.


Comment 20 cvogt 2020-03-18 14:07:38 UTC
*** Bug 1804287 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.