#2008 Node's overflow menu items are unclickable if the page is scrol… (

#2009)

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/src/common-canvas/cc-context-toolbar.jsx

@@ -234,7 +234,7 @@ class CommonCanvasContextToolbar extends React.Component {
 			({ x, y } = this.adjustPosToFit(x, y, toolbarWidth, ICON_SIZE_PLUS_GAP));
 
 			contextToolbar = (
-				<div className={"context-toolbar"} style={{ left: x, top: y, width: toolbarWidth }}
+				<div className={"context-toolbar floating-toolbar"} style={{ left: x, top: y, width: toolbarWidth }}
 					onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
 				>
 					<Toolbar

canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx

@@ -170,6 +170,7 @@ class ToolbarActionItem extends React.Component {
 					actionItemRect={actionItemRect}
 					expandDirection={"vertical"}
 					containingDivId={this.props.containingDivId}
+					isCascadeMenu={false}
 				/>
 			);
 		}

canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx

@@ -127,6 +127,7 @@ class ToolbarSubMenuItem extends React.Component {
 					actionItemRect={actionItemRect}
 					expandDirection={"horizontal"}
 					containingDivId={this.props.containingDivId}
+					isCascadeMenu
 				/>
 			);
 		}

canvas_modules/common-canvas/src/toolbar/toolbar-sub-panel.jsx

@@ -65,7 +65,9 @@ class ToolbarSubPanel extends React.Component {
 	}
 
 	render() {
-		const style = generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect);
+		const style = this.props.isCascadeMenu
+			? generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect)
+			: null;
 
 		if (this.props.subPanel) {
 			return (
@@ -87,6 +89,7 @@ ToolbarSubPanel.propTypes = {
 	closeSubArea: PropTypes.func,
 	setToolbarFocusAction: PropTypes.func,
 	actionItemRect: PropTypes.object,
+	isCascadeMenu: PropTypes.bool,
 	expandDirection: PropTypes.string.isRequired,
 	containingDivId: PropTypes.string
 };

canvas_modules/common-canvas/src/toolbar/toolbar-sub-utils.js

@@ -35,6 +35,11 @@ export function adjustSubAreaPosition(areaRef, containingDivId, expandDirection,
 
 	const thisAreaRect = areaRef.getBoundingClientRect();
 
+	// If one of our parent objects contains the "floating-toolbar" class, we assume
+	// the toolbar is displayed in an 'absolute' position. This changes the offset calculations
+	// for the sub-area being displayed.
+	const isFloatingToolbar = areaRef.closest(".floating-toolbar");
+
 	// Calculate the amount that the panel/menu is outside of the containing div
 	// edges. Positive value means it is outside. Negative is inside.
 	const outsideBottom = actionItemRect.bottom + thisAreaRect.height - containingDivRect.bottom;
@@ -45,27 +50,29 @@ export function adjustSubAreaPosition(areaRef, containingDivId, expandDirection,
 		if (outsideBottom > 0) {
 			const topGap = actionItemRect.top - containingDivRect.top;
 			const newTop = (topGap > thisAreaRect.height)
-				? actionItemRect.top - thisAreaRect.height
-				: actionItemRect.bottom - outsideBottom;
+				? -(thisAreaRect.height)
+				: -(outsideBottom);
 
 			areaRef.style.top = newTop + "px";
 		}
 
 		if (outsideRight > 0) {
-			const newLeft = actionItemRect.left - outsideRight;
+			const newLeft = isFloatingToolbar
+				? actionItemRect.width - outsideRight
+				: actionItemRect.left - containingDivRect.left - outsideRight;
 			areaRef.style.left = newLeft + "px";
 		}
 
 	} else {
 		const outsideRight = actionItemRect.right + thisAreaRect.width - containingDivRect.right;
 
 		if (outsideBottom > 0) {
-			const newTop = thisAreaRect.top - outsideBottom - 2;
+			const newTop = -(outsideBottom + 2);
 			areaRef.style.top = newTop + "px";
 		}
 
 		if (outsideRight > 0) {
-			const newLeft = actionItemRect.left - thisAreaRect.width;
+			const newLeft = -(thisAreaRect.width);
 			areaRef.style.left = newLeft + "px";
 		}
 	}
@@ -78,13 +85,13 @@ export function generateSubAreaStyle(expandDirection, actionItemRect) {
 
 	if (expandDirection === "vertical") {
 		return {
-			top: actionItemRect.bottom + 1,
+			top: actionItemRect.height + 1,
 			left: actionItemRect.left
 		};
 	}
 	return {
-		top: actionItemRect.top - 1,
-		left: actionItemRect.left + actionItemRect.width
+		top: -1,
+		left: actionItemRect.width
 	};
 }
 

canvas_modules/common-canvas/src/toolbar/toolbar.scss

@@ -194,6 +194,7 @@ $toolbar-divider-width: 1px;
 }
 
 .toolbar-sub-menu-item {
+	position: relative; // Allows any cascade sub-menu to be positioned absolutely
 	& button {
 		width: 100%;
 		padding-top: 0;
@@ -362,7 +363,7 @@ $toolbar-divider-width: 1px;
 	width: 200px;
 	z-index: 2; // Make sure sub-area appears above bottom panel
 	display: block;
-	position: fixed; // Actual position will be calculated in the code
+	position: absolute; // Actual position will be calculated in the code
 	list-style-type: none;
 	padding: 0;
 	border: $toolbar-divider-width solid $layer-accent-01;

canvas_modules/harness/cypress/e2e/canvas/comment.cy.js

@@ -238,7 +238,7 @@ describe("Test edting a comment using the text toolbar to add markdown syntax",
 			initialText: "Some title text!",
 			textToHighlight: "title",
 			action: "headerStyle",
-			menuAction: "title",
+			menuAction: "Title",
 			markdownText: "# Some title text!",
 			html: "<h1>Some title text!</h1>\n"
 		});
@@ -249,7 +249,7 @@ describe("Test edting a comment using the text toolbar to add markdown syntax",
 			initialText: "Some header text!",
 			textToHighlight: "header",
 			action: "headerStyle",
-			menuAction: "header",
+			menuAction: "Header",
 			markdownText: "## Some header text!",
 			html: "<h2>Some header text!</h2>\n"
 		});
@@ -260,7 +260,7 @@ describe("Test edting a comment using the text toolbar to add markdown syntax",
 			initialText: "Some subheader text!",
 			textToHighlight: "subheader",
 			action: "headerStyle",
-			menuAction: "subheader",
+			menuAction: "Subheader",
 			markdownText: "### Some subheader text!",
 			html: "<h3>Some subheader text!</h3>\n"
 		});
@@ -271,7 +271,7 @@ describe("Test edting a comment using the text toolbar to add markdown syntax",
 			initialText: "## Some body text!", // Set initial text to be a header so it can change to body.
 			textToHighlight: "body",
 			action: "headerStyle",
-			menuAction: "body",
+			menuAction: "Body",
 			markdownText: "Some body text!",
 			html: "<p>Some body text!</p>\n"
 		});

canvas_modules/harness/cypress/support/canvas/context-toolbar-cmds.js

@@ -34,13 +34,14 @@ Cypress.Commands.add("getOptionFromContextToolbar", (optionName) => {
 });
 
 Cypress.Commands.add("clickOptionFromContextToolbarOverflow", (optionName) => {
-	cy.getOptionFromContextToolbarOverflow(optionName).click();
+	cy.getOptionFromContextToolbarOverflow(optionName).click({ force: true });
 });
 
 Cypress.Commands.add("getOptionFromContextToolbarOverflow", (optionName) => {
 	cy.getContextToolbar()
 		.find(".toolbar-popover-list")
 		.find(".toolbar-sub-menu-item")
+		.find("button")
 		.then((options) => {
 			for (let idx = 0; idx < options.length; idx++) {
 				if (options[idx].outerText === optionName) {

canvas_modules/harness/cypress/support/canvas/text-toolbar-cmds.js

@@ -19,7 +19,7 @@ Cypress.Commands.add("clickTextToolbarOption", (action, menuAction) => {
 
 	// The header action causes a menu to appear so we handle that usng menuAction.
 	if (action === "headerStyle") {
-		cy.getTextToolbarAction(menuAction).click();
+		cy.getOptionFromTextToolbarOverflow(menuAction).click({ force: true });
 	}
 });
 
@@ -30,3 +30,18 @@ Cypress.Commands.add("getTextToolbarAction", (action) => {
 Cypress.Commands.add("getTextToolbar", () => {
 	cy.get(".text-toolbar");
 });
+
+Cypress.Commands.add("getOptionFromTextToolbarOverflow", (optionName) => {
+	cy.getTextToolbar()
+		.find(".toolbar-popover-list")
+		.find(".toolbar-sub-menu-item")
+		.find("button")
+		.then((options) => {
+			for (let idx = 0; idx < options.length; idx++) {
+				if (options[idx].outerText === optionName) {
+					return options[idx];
+				}
+			}
+			return null;
+		});
+});

canvas_modules/harness/cypress/support/canvas/toolbar-cmds.js

@@ -120,7 +120,7 @@ Cypress.Commands.add("dismissNotificationMessage", (index) => {
 });
 
 Cypress.Commands.add("clearAllNotificationMessages", () => {
-	cy.get("button.notification-panel-clear-all").click();
+	cy.get("button.notification-panel-clear-all").click({ force: true });
 });
 
 Cypress.Commands.add("clickToolbarOverflow", () => {

canvas_modules/harness/cypress/support/canvas/verification-cmds.js

@@ -1369,7 +1369,7 @@ Cypress.Commands.add("verifyLatestNotificationMessage", (messagesLength, type, t
 Cypress.Commands.add("clickNotificationAtIndex", (index) => {
 	cy.get(".notifications-button-container .notifications")
 		.eq(index)
-		.click();
+		.click({ force: true });
 });
 
 Cypress.Commands.add("verifyNotificationCenterExists", () => {