Fixes JSX tabbing

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Feb 25, 2024 · 4c9dec4 · 4c9dec4
1 parent 0b1a17e
commit 4c9dec4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 21 deletions.
diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx
@@ -67,7 +67,7 @@ class ToolbarActionItem extends React.Component {
 
 	// Called by toolbar.jsx
 	isEnabled() {
-		return this.props.actionObj.enable;
+		return this.props.actionObj.enable || this.props.actionObj.jsx;
 	}
 
 	clickOutside(evt) {
@@ -240,7 +240,10 @@ ToolbarActionItem.propTypes = {
 		subMenu: PropTypes.array,
 		subPanel: PropTypes.any,
 		subPanelData: PropTypes.object,
-		jsx: PropTypes.object,
+		jsx: PropTypes.oneOfType([
+			PropTypes.object,
+			PropTypes.func
+		]),
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
 			PropTypes.object,

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx
@@ -54,6 +54,14 @@ class ToolbarButtonItem extends React.Component {
 	componentDidUpdate() {
 		if (this.props.isFocusInToolbar &&
 				this.props.buttonFocusAction === this.props.actionObj.action) {
+			// If a Jsx object was provided, the class of the component should have
+			// been set to toolbar-jsx-obj.
+			const jsxItem = this.buttonRef.current.querySelector(".toolbar-jsx-obj");
+			if (jsxItem) {
+				jsxItem.focus();
+				return;
+			}
+
 			this.buttonRef.current.focus();
 		}
 	}
@@ -169,7 +177,7 @@ class ToolbarButtonItem extends React.Component {
 		return null;
 	}
 
-	generateButton(actionObj) {
+	generateRegularItem(actionObj) {
 		let labelBefore = null;
 		let labelAfter = null;
 
@@ -264,6 +272,26 @@ class ToolbarButtonItem extends React.Component {
 		);
 	}
 
+	// Creates a <div> containing the JSX in the actionObj.jsx field, wrapped in a tooltip
+	// <div>, for display as an action item in the toolbar. The jsx field can be just
+	// regular JSX OR a function that returns JSX. If the application has provided a
+	// function we call it, passing in the tabIndex that the component in the JSX should
+	// use, based on whether it is focused or not.
+	generateJsxItem(actionObj) {
+		let content = null;
+		if (typeof actionObj.jsx === "function") {
+			const tabIndex = this.props.buttonFocusAction === actionObj.action ? 0 : -1;
+			content = actionObj.jsx(tabIndex);
+		} else {
+			content = actionObj.jsx;
+		}
+		const jsx = this.wrapInTooltip(content);
+		const div = (<div ref={this.buttonRef}>{jsx}</div>);
+
+		return div;
+	}
+
+
 	wrapInTooltip(content) {
 		if (!this.props.isInMenu && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
 			const tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
@@ -296,13 +324,10 @@ class ToolbarButtonItem extends React.Component {
 
 	render() {
 		const actionObj = this.props.actionObj;
-		let divContent = null;
 
-		if (actionObj.jsx) {
-			divContent = this.wrapInTooltip(actionObj.jsx);
-		} else {
-			divContent = this.generateButton(actionObj);
-		}
+		const divContent = actionObj.jsx
+			? this.generateJsxItem(actionObj)
+			: this.generateRegularItem(actionObj);
 
 		return divContent;
 	}
@@ -333,7 +358,10 @@ ToolbarButtonItem.propTypes = {
 		subMenu: PropTypes.array,
 		subPanel: PropTypes.any,
 		subPanelData: PropTypes.object,
-		jsx: PropTypes.object,
+		jsx: PropTypes.oneOfType([
+			PropTypes.object,
+			PropTypes.func
+		]),
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
 			PropTypes.object,

diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js
@@ -2297,44 +2297,62 @@ class App extends React.Component {
 					{
 						action: "custom-loading",
 						tooltip: "A custom loading!",
-						jsx: (
+						jsx: (tabIndex) => (
 							<div style={{ padding: "4px 11px" }}>
-								<InlineLoading status="active" description="Loading..." />
+								<InlineLoading status="active" description="Loading..."
+									className={"toolbar-jsx-obj"}
+									tabIndex={tabIndex}
+								/>
 							</div>
 						)
 					},
 					{ divider: true },
 					{
 						action: "custom-checkbox",
 						tooltip: "A custom checkbox!",
-						jsx: (
+						jsx: (tabIndex) => (
 							<div style={{ padding: "5px 11px" }}>
-								<Checkbox id={"chk1"} defaultChecked labelText={"Check it out"} />
+								<Checkbox id={"custom-checkbox"} defaultChecked labelText={"Check it out"}
+									onClick={(e) => window.alert("Checkbox clicked!")}
+									className={"toolbar-jsx-obj"}
+									tabIndex={tabIndex}
+								/>
 							</div>
 						)
 					},
 					{ divider: true },
 					{
 						action: "custom-button",
 						tooltip: "A custom button of type primary!",
-						jsx: (
-							<div className="toolbar-custom-button">
-								<Button id={"btn1"} size="field" kind="primary">Custom button </Button>
-							</div>
+						jsx: (tabIndex) => (
+							<Button id={"custom-button"} size="field" kind="primary"
+								onClick={(e) => window.alert("Button clicked!")}
+								className={"toolbar-jsx-obj"}
+								tabIndex={tabIndex}
+							>
+								Custom button
+							</Button>
 						)
 					},
 					{ divider: true },
 					{
 						action: "custom-dropdown",
 						tooltip: () => (this.suppressTooltip ? null : "A drop down using the overflow menu!"),
-						jsx: (
+						jsx: (tabIndex) => (
 							<div className="toolbar-custom-button">
 								<OverflowMenu
 									id={"ovf1"}
 									renderIcon={TextScale32}
 									iconDescription={""}
-									onOpen={() => (this.suppressTooltip = true)}
-									onClose={() => (this.suppressTooltip = false)}
+									onOpen={() => (
+										this.suppressTooltip = true)
+									}
+									onClose={() => {
+										this.suppressTooltip = false;
+										window.alert("Option selected");
+									}}
+									className={"toolbar-jsx-obj"}
+									tabIndex={tabIndex}
 								>
 									<OverflowMenuItem itemText="Big" />
 									<OverflowMenuItem itemText="Medium" />