orc-shared 5.10.2-dev.2 → 5.10.2-dev.4

package/dist/components/MaterialUI/Inputs/InputBase.js

@@ -286,6 +286,9 @@ var InputBase = function InputBase(_ref) {
           setInputText(_currentValue2.toString());
         }
       };
+      var focusInput = function focusInput(target) {
+        target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
+      };
       controlSpecificSuffix = /*#__PURE__*/_react.default.createElement("div", {
         className: classes.numericSpinnerContainer
       }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -293,8 +296,15 @@ var InputBase = function InputBase(_ref) {
         tabIndex: "-1",
         "data-qa": "increase",
         disabled: disabled,
-        onClick: function onClick() {
-          return increaseNumericValue();
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        } // prevent the button from stealing focus
+        ,
+        onClick: function onClick(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          increaseNumericValue();
+          focusInput(event.target);
         }
       }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
         id: "chevron-up"
@@ -303,8 +313,15 @@ var InputBase = function InputBase(_ref) {
         tabIndex: "-1",
         "data-qa": "decrease",
         disabled: disabled,
-        onClick: function onClick() {
-          return decreaseNumericValue();
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        } // prevent the button from stealing focus
+        ,
+        onClick: function onClick(event) {
+          event.preventDefault();
+          event.stopPropagation();
+          decreaseNumericValue();
+          focusInput(event.target);
         }
       }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
         id: "chevron-down"
@@ -328,6 +345,7 @@ var InputBase = function InputBase(_ref) {
         } else {
           decreaseNumericValue();
         }
+        focusInput(event.target);
       };
     }
   }
@@ -402,6 +420,19 @@ var InputBase = function InputBase(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputText, metadata, timeoutDelay, update, value]);
+  if (onKeyDown) {
+    if (inputAttributes.onKeyDown) {
+      var originalKeyDown = inputAttributes.onKeyDown;
+      inputAttributes.onKeyDown = function (event) {
+        originalKeyDown(event);
+        if (!event.isDefaultPrevented()) {
+          onKeyDown(event);
+        }
+      };
+    } else {
+      inputAttributes.onKeyDown = onKeyDown;
+    }
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -411,7 +442,8 @@ var InputBase = function InputBase(_ref) {
   }, label), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: "flex"
-    }
+    },
+    className: "InputBase-input-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_InputBase.default, {
     classes: {
       input: (0, _classnames.default)(classes.controlInput, inputBaseInputStyle),
@@ -426,7 +458,6 @@ var InputBase = function InputBase(_ref) {
     placeholder: placeholder,
     value: textToDisplay,
     fullWidth: true,
-    onKeyDown: onKeyDown,
     onWheel: onWheel,
     onChange: function onChange(event) {
       return onChangeHandler(event);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.2-dev.2",
+	"version": "5.10.2-dev.4",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/MaterialUI/Inputs/InputBase.js

@@ -258,6 +258,10 @@ const InputBase = ({ inputProps }) => {
 				}
 			};
 
+			const focusInput = target => {
+				target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
+			};
+
 			controlSpecificSuffix = (
 				<div className={classes.numericSpinnerContainer}>
 					<IconButton
@@ -265,7 +269,13 @@ const InputBase = ({ inputProps }) => {
 						tabIndex="-1"
 						data-qa="increase"
 						disabled={disabled}
-						onClick={() => increaseNumericValue()}
+						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
+						onClick={event => {
+							event.preventDefault();
+							event.stopPropagation();
+							increaseNumericValue();
+							focusInput(event.target);
+						}}
 					>
 						<Icon id="chevron-up" />
 					</IconButton>
@@ -275,7 +285,13 @@ const InputBase = ({ inputProps }) => {
 						tabIndex="-1"
 						data-qa="decrease"
 						disabled={disabled}
-						onClick={() => decreaseNumericValue()}
+						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
+						onClick={event => {
+							event.preventDefault();
+							event.stopPropagation();
+							decreaseNumericValue();
+							focusInput(event.target);
+						}}
 					>
 						<Icon id="chevron-down" />
 					</IconButton>
@@ -304,6 +320,8 @@ const InputBase = ({ inputProps }) => {
 				} else {
 					decreaseNumericValue();
 				}
+
+				focusInput(event.target);
 			};
 		}
 	}
@@ -395,11 +413,26 @@ const InputBase = ({ inputProps }) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [inputText, metadata, timeoutDelay, update, value]);
 
+	if (onKeyDown) {
+		if (inputAttributes.onKeyDown) {
+			const originalKeyDown = inputAttributes.onKeyDown;
+			inputAttributes.onKeyDown = event => {
+				originalKeyDown(event);
+
+				if (!event.isDefaultPrevented()) {
+					onKeyDown(event);
+				}
+			};
+		} else {
+			inputAttributes.onKeyDown = onKeyDown;
+		}
+	}
+
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
 				{label && <label className={`${classes.prepend} ${disabled && classes.disabledPrepend}`}>{label}</label>}
-				<div style={{ display: "flex" }}>
+				<div style={{ display: "flex" }} className="InputBase-input-wrapper">
 					<InputBaseMUI
 						classes={{
 							input: classNames(classes.controlInput, inputBaseInputStyle),
@@ -414,7 +447,6 @@ const InputBase = ({ inputProps }) => {
 						placeholder={placeholder}
 						value={textToDisplay}
 						fullWidth={true}
-						onKeyDown={onKeyDown}
 						onWheel={onWheel}
 						onChange={event => onChangeHandler(event)}
 						error={!!error}

package/src/components/MaterialUI/Inputs/InputBase.test.js

@@ -982,6 +982,74 @@ describe("AdvancedNumericInput", () => {
 		expect(btn.length, "to equal", 0);
 	});
 
+	it("Advanced numeric input value without decimals, simulate onMouseDown to make code coverage happy", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const btnIncrease = mountedComponent.find("[data-qa='increase']").hostNodes();
+		const btnDecrease = mountedComponent.find("[data-qa='decrease']").hostNodes();
+
+		btnIncrease.simulate("mouseDown");
+		btnDecrease.simulate("mouseDown");
+	});
+
+	it("Advanced numeric input value without decimals but with custom onKeyDown with prevent default", () => {
+		const keydownSpy = sinon.stub().callsFake(e => {
+			e.preventDefault();
+		});
+
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(keydownSpy, "was called once");
+		expect(update, "was not called");
+	});
+
+	it("Advanced numeric input value without decimals but with custom onKeyDown without prevent default", () => {
+		const keydownSpy = sinon.stub().callsFake(e => {});
+
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(keydownSpy, "was called once");
+		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
+	});
+
 	it("Change advanced numeric input value, empty initial value with increase button", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";