orc-shared 1.7.0-dev.8 → 5.2.0-dev.1

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

@@ -1,12 +1,11 @@
 import React from "react";
 import { mount } from "enzyme";
-import InputBase, { AdvancedNumericInput } from "./InputBase";
+import InputBase from "./InputBase";
 import InputBaseMUI from "@material-ui/core/InputBase";
 import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import InputBaseProps from "./InputBaseProps";
 import { act } from "unexpected-reaction";
-import { fireEvent, render, getByDisplayValue } from "@testing-library/react";
 
 describe("InputBase Component", () => {
 	let update, container;
@@ -58,45 +57,6 @@ describe("InputBase Component", () => {
 		expect(mountedComponent.prop("inputProps").get(InputBaseProps.propNames.value), "to equal", aValue + aValue);
 	});
 
-	it("Renders multiline InputBase component with default number of rows", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "value";
-		const defaultRows = 4;
-
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "text");
-		inputProps.set(InputBaseProps.propNames.multiline, true);
-
-		const component = <InputBase inputProps={inputProps} />;
-
-		const mountedComponent = mount(component);
-		const expected = <InputBaseMUI value={aValue} title={aValue} minRows={defaultRows} />;
-
-		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
-	});
-
-	it("Renders multiline InputBase component with desired number of rows", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "value";
-		const desiredNumberOfRows = 20;
-
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "text");
-		inputProps.set(InputBaseProps.propNames.multiline, true);
-		inputProps.set(InputBaseProps.propNames.rows, desiredNumberOfRows);
-
-		const component = <InputBase inputProps={inputProps} />;
-
-		const mountedComponent = mount(component);
-		const expected = <InputBaseMUI value={aValue} title={aValue} minRows={desiredNumberOfRows} />;
-
-		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
-	});
-
 	it("Renders InputBase component with title attribute for input of type text", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
@@ -286,35 +246,6 @@ describe("InputBase Component", () => {
 
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
-
-	it("Change value on blur with pending timer", () => {
-		window.bypassDebounce = false;
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-		const onBlur = sinon.spy().named("blur");
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
-		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("change", { target: { value: "13", focus: () => {} } });
-		input.simulate("blur", {});
-
-		expect(onBlur, "was called once");
-		expect(update, "not to have calls satisfying", [{ args: [aValue, metadata] }]);
-		expect(update, "to have calls satisfying", [{ args: ["13", metadata] }]);
-	});
 });
 
 describe("InputBase component debouce", () => {
@@ -380,309 +311,3 @@ describe("InputBase component debouce", () => {
 		expect(input.get(0).props.value, "to equal", "");
 	});
 });
-
-describe("AdvancedNumericInput", () => {
-	const noop = function () {};
-	let update, container;
-	beforeEach(() => {
-		window.bypassDebounce = true;
-		jest.useFakeTimers();
-
-		container = document.createElement("div");
-		document.body.appendChild(container);
-		update = sinon.spy().named("update");
-	});
-	afterEach(() => {
-		jest.useRealTimers();
-		delete window.bypassDebounce;
-		document.body.removeChild(container);
-		container = null;
-	});
-
-	it("Renders InputBase component as advanced numeric input", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "value";
-
-		inputProps.set(InputBaseProps.propNames.update, update);
-		inputProps.set(InputBaseProps.propNames.value, aValue);
-		inputProps.set(InputBaseProps.propNames.label, aLabel);
-		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-
-		const component = <InputBase inputProps={inputProps} />;
-
-		const mountedComponent = mount(component);
-		const expected = <InputBaseMUI value={aValue} title="" inputComponent={AdvancedNumericInput} />;
-
-		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
-	});
-
-	it("Renders InputBase component as advanced numeric input with custom numeric props", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "value";
-
-		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: 2 });
-
-		const component = <InputBase inputProps={inputProps} />;
-
-		const mountedComponent = mount(component);
-
-		const advInput = mountedComponent.find("AdvancedNumericInput");
-		expect(advInput.props().decimalScale, "to be", 2);
-	});
-
-	it("Change advanced numeric input value", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-		input.simulate("change", { target: { value: "13", focus: noop } });
-
-		expect(update, "to have calls satisfying", [{ args: ["13", metadata] }]);
-	});
-
-	it("Change advanced numeric input on blur without custom blur method", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("blur", {});
-
-		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
-	});
-
-	it("Onblur send a formatted string instead of a number", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = 12.2;
-		const metadata = {
-			test: "value",
-		};
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("blur", {});
-
-		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
-	});
-
-	it("Onblur send a formatted string with default numeric input props", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = 12.2;
-		const metadata = {
-			test: "value",
-		};
-
-		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.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("blur", {});
-
-		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }]);
-	});
-
-	it("Onblur send an unformatted string when blurFormattingSkipFixedDecimalScale is true", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = 12.2;
-		const metadata = {
-			test: "value",
-		};
-
-		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: 2,
-			blurFormattingSkipFixedDecimalScale: true,
-		});
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("blur", {});
-
-		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }]);
-	});
-
-	it("Onblur send an empty string when the initial value is empty", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = null;
-		const metadata = {
-			test: "value",
-		};
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("blur", {});
-
-		expect(update, "to have calls satisfying", [{ args: ["", metadata] }]);
-	});
-
-	it("Change advanced numeric input on blur with no pending timer", () => {
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-		const onBlur = sinon.spy().named("blur");
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("blur", {});
-
-		expect(onBlur, "was called once");
-		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
-	});
-
-	it("Change advanced numeric input on blur with pending timer", () => {
-		window.bypassDebounce = false;
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-		const onBlur = sinon.spy().named("blur");
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
-		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const mountedComponent = mount(component);
-		const input = mountedComponent.find("input");
-
-		input.simulate("change", { target: { value: "13", focus: noop } });
-		input.simulate("blur", {});
-
-		expect(onBlur, "was called once");
-		expect(update, "not to have calls satisfying", [{ args: [aValue, metadata] }]);
-		expect(update, "to have calls satisfying", [{ args: ["13.00", metadata] }]);
-	});
-
-	it("Local state is reset when the value props changes for the same value as inputText", () => {
-		window.bypassDebounce = false;
-		const inputProps = new InputBaseProps();
-		const aLabel = "aLabel";
-		const aValue = "12.2";
-		const metadata = {
-			test: "value",
-		};
-		const onBlur = sinon.spy().named("blur");
-
-		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: 2 });
-		inputProps.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
-		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
-
-		const component = <InputBase inputProps={inputProps} />;
-		const { container, rerender } = render(component);
-
-		const input = getByDisplayValue(container, "12.2");
-
-		fireEvent.change(input, {
-			target: {
-				value: "13",
-			},
-		});
-
-		const inputProps2 = new InputBaseProps();
-		inputProps2.set(InputBaseProps.propNames.update, update);
-		inputProps2.set(InputBaseProps.propNames.value, "13");
-		inputProps2.set(InputBaseProps.propNames.label, aLabel);
-		inputProps2.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
-		inputProps2.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
-		inputProps2.set(InputBaseProps.propNames.metadata, metadata);
-		inputProps2.set(InputBaseProps.propNames.onBlur, onBlur);
-		inputProps2.set(InputBaseProps.propNames.timeoutDelay, 1000);
-
-		act(() => {
-			rerender(<InputBase inputProps={inputProps2} />);
-		});
-
-		// no idea what to assert here, this test is mostly for code coverage
-	});
-});

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

@@ -17,9 +17,6 @@ class InputBaseProps extends ComponentProps {
 		endAdornment: "endAdornment",
 		metadata: "metadata",
 		autoComplete: "autoComplete",
-		timeoutDelay: "timeoutDelay",
-		rows: "rows",
-		numericInputProps: "numericInputProps",
 	};
 
 	static ruleNames = {
@@ -44,9 +41,6 @@ class InputBaseProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.endAdornment, null);
 		this.componentProps.set(this.constructor.propNames.metadata, null);
 		this.componentProps.set(this.constructor.propNames.autoComplete, null);
-		this.componentProps.set(this.constructor.propNames.timeoutDelay, null);
-		this.componentProps.set(this.constructor.propNames.rows, null);
-		this.componentProps.set(this.constructor.propNames.numericInputProps, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.input, null);
 		this.componentClasses.set(this.constructor.ruleNames.errorText, null);

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

@@ -18,9 +18,6 @@ describe("InputBase Props", () => {
 			"endAdornment",
 			"metadata",
 			"autoComplete",
-			"timeoutDelay",
-			"rows",
-			"numericInputProps",
 		];
 
 		expect(InputBaseProps.propNames, "to have keys", propNames);
@@ -43,9 +40,6 @@ describe("InputBase Props", () => {
 			"endAdornment",
 			"metadata",
 			"autoComplete",
-			"timeoutDelay",
-			"rows",
-			"numericInputProps",
 		];
 
 		const ruleNames = ["input", "errorText"];

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useState, useRef } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import SelectProps from "../SelectProps";
 import Icon from "../../DataDisplay/Icon";
@@ -80,9 +80,12 @@ export const useStyles = makeStyles(theme => ({
 	},
 	parentInput: {
 		flex: "13 0 0",
-		zIndex: 1,
-		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
-		boxShadow: "none",
+		zIndex: props => (props.focused ? 99 : 1),
+		border: props =>
+			props.focused
+				? `${theme.spacing(0.1)} solid ${theme.palette.focus}`
+				: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
+		boxShadow: props => (props.focused ? `0 0 4px ${theme.palette.focus}` : "none"),
 		width: "100%",
 		display: "inherit",
 		marginLeft: theme.spacing(-0.1),
@@ -101,11 +104,6 @@ export const useStyles = makeStyles(theme => ({
 				borderBottomLeftRadius: 0,
 			},
 		},
-		"&:focus-within": {
-			zIndex: 99,
-			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
-			boxShadow: `0 0 4px ${theme.palette.focus}`,
-		},
 	},
 	selectRoot: {
 		zIndex: 10,
@@ -151,30 +149,17 @@ const SearchControl = ({
 	searchOption,
 	onSearch = () => {},
 	disabled,
-	focusAndSelectSearchFieldOnLoad = true,
-	focusSearchOnSearchOptionChange = false,
 }) => {
 	searchOptions = !searchOptions?.length ? null : searchOptions;
 	searchOption = getSearchOptionValue(searchOptions, searchOption);
+	const [inputFocused, setInputFocused] = useState(false);
 
-	const classes = useStyles();
+	const classes = useStyles({ focused: inputFocused });
 
 	const inputRef = useRef();
 
 	const update = value => {
-		if (focusSearchOnSearchOptionChange && inputRef.current) {
-			onSearch(value, "");
-			setTimeout(() => {
-				/* istanbul ignore next */
-				if (inputRef.current) {
-					inputRef.current.value = "";
-					inputRef.current.focus();
-					inputRef.current.select();
-				}
-			}, 0);
-		} else {
-			onSearch(value, defaultValue);
-		}
+		onSearch(value, defaultValue);
 	};
 
 	const selectProps = new SelectProps();
@@ -193,28 +178,28 @@ const SearchControl = ({
 	selectProps.setStyle(SelectProps.ruleNames.root, classes.selectRoot);
 	selectProps.setStyle(SelectProps.ruleNames.paper, classes.selectPaper);
 
-	useEffect(() => {
-		/* istanbul ignore next */
-		if (focusAndSelectSearchFieldOnLoad && inputRef.current) {
-			inputRef.current.focus();
-			inputRef.current.select();
+	const handleKeyDown = e => {
+		if (e.key === "Enter") {
+			onSearch(searchOption, e.target.value);
+			e.preventDefault();
+			e.stopPropagation();
 		}
-	}, [focusAndSelectSearchFieldOnLoad]);
+	};
+
+	const onFocusedEvent = (event, focused) => {
+		setInputFocused(focused);
+		event.preventDefault();
+		event.stopPropagation();
+	};
 
 	const SelectSection = () => {
 		if (searchOptions === null) return null;
 		else return <Select className={classes.selectInput} options={searchOptions} selectProps={selectProps} />;
 	};
 
-	const onSubmit = event => {
-		// using form submit instead of a keydown (with key=enter) to allow the 'enter key' event to be canceled elsewhere to avoid the submit event
-		onSearch(searchOption, inputRef.current?.value);
-		event.preventDefault();
-	};
-
 	const inputSection = (
-		<div data-qa="searchInput" className={classes.parentInput}>
-			<form data-qa="searchForm" className={classes.fullWidth} onSubmitCapture={onSubmit}>
+		<div data-qa="searchInput" data-qa-is-focused={inputFocused} className={classes.parentInput}>
+			<form data-qa="searchForm" className={classes.fullWidth}>
 				<Input
 					placeholder={placeholder}
 					defaultValue={defaultValue}
@@ -222,7 +207,10 @@ const SearchControl = ({
 					type="text"
 					disabled={disabled}
 					classes={{ input: classes.controlInput }}
+					onKeyDown={handleKeyDown}
 					disableUnderline={true}
+					onFocus={e => onFocusedEvent(e, true)}
+					onBlur={e => onFocusedEvent(e, false)}
 					endAdornment={
 						<InputAdornment position="start">
 							<IconButton

package/src/components/MaterialUI/Inputs/PredefinedElements/SearchControl.test.js

@@ -53,11 +53,10 @@ describe("useStyles", () => {
 });
 
 describe("SearchControl Component", () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
+	const stateSetter = sinon.spy().named("focus");
+	const useStateMock = initState => [initState, stateSetter];
+
 	afterEach(() => {
-		jest.useRealTimers();
 		jest.clearAllMocks();
 	});
 
@@ -233,7 +232,8 @@ describe("SearchControl Component", () => {
 		expect(searchInput.length, "to be", 1);
 
 		searchInput.instance().value = "abc";
-		mountedComponent.find("form").simulate("submit", { preventDefault: () => {} });
+		searchInput.simulate("keydown", { key: "Tab" });
+		searchInput.simulate("keydown", { key: "Enter" });
 
 		expect(onSearchEvent, "to have calls satisfying", [{ args: ["aValue", "abc"] }]);
 	});
@@ -371,7 +371,7 @@ describe("SearchControl Component", () => {
 		expect(onSearchEvent, "to have calls satisfying", [{ args: ["anotherValue", "abcdef123"] }]);
 	});
 
-	it("Search Control should clear the search when changing the option", () => {
+	it("Search Control should render with the 2nd value", () => {
 		const options = [
 			{ value: "aValue", label: "aLabel" },
 			{ value: "anotherValue", label: "anotherLabel" },
@@ -385,8 +385,8 @@ describe("SearchControl Component", () => {
 					placeholder="placeHolderTest"
 					defaultValue={"abcdef123"}
 					searchOptions={options}
+					searchOption={"anotherValue"}
 					onSearch={onSearchEvent}
-					focusSearchOnSearchOptionChange={true}
 				/>
 			</TestWrapper>
 		);
@@ -395,53 +395,48 @@ describe("SearchControl Component", () => {
 
 		const selectMui = mountedComponent.find(SelectMUI);
 
-		const event = {
-			target: {
-				value: "anotherValue",
-			},
-		};
-
-		onSearchEvent.resetHistory();
-
-		selectMui.invoke("onChange")(event);
-
-		expect(onSearchEvent.callCount, "to equal", 1);
-		expect(onSearchEvent, "to have calls satisfying", [{ args: ["anotherValue", ""] }]);
-
-		const allInputs = mountedComponent.find("input");
-		const searchInput = allInputs.find("[placeholder='placeHolderTest']");
-		expect(searchInput.length, "to be", 1);
-
-		expect(searchInput.instance().value, "to be", "abcdef123");
-		jest.runOnlyPendingTimers();
-		expect(searchInput.instance().value, "to be", "");
+		expect(selectMui.props().value, "to equal", "anotherValue");
 	});
 
-	it("Search Control should render with the 2nd value", () => {
+	it("focusing text input should set focus on container", () => {
+		jest.spyOn(React, "useState").mockImplementation(useStateMock);
+
 		const options = [
 			{ value: "aValue", label: "aLabel" },
 			{ value: "anotherValue", label: "anotherLabel" },
 		];
 
-		const onSearchEvent = sinon.spy().named("search");
-
 		const component = (
 			<TestWrapper stylesProvider muiThemeProvider={{ theme }}>
-				<SearchControl
-					placeholder="placeHolderTest"
-					defaultValue={"abcdef123"}
-					searchOptions={options}
-					searchOption={"anotherValue"}
-					onSearch={onSearchEvent}
-				/>
+				<SearchControl placeholder="placeHolderTest" searchOptions={options} />
 			</TestWrapper>
 		);
 
 		const mountedComponent = mount(component);
 
-		const selectMui = mountedComponent.find(SelectMUI);
+		const allInputs = mountedComponent.find("input");
+		const searchInput = allInputs.find("[placeholder='placeHolderTest']");
+		expect(searchInput.length, "to be", 1);
 
-		expect(selectMui.props().value, "to equal", "anotherValue");
+		let searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
+		expect(searchEditParent.length, "to be", 1);
+
+		expect(searchEditParent.props()["data-qa-is-focused"], "to be", false);
+
+		const event = {
+			preventDefault: () => {},
+			stopPropagation: () => {},
+		};
+
+		searchInput.invoke("onFocus")(event);
+
+		searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
+		expect(searchEditParent.props()["data-qa-is-focused"], "to be", true);
+
+		searchInput.invoke("onBlur")(event);
+
+		searchEditParent = mountedComponent.find('[data-qa="searchInput"]');
+		expect(searchEditParent.props()["data-qa-is-focused"], "to be", false);
 	});
 
 	it("Renders Search Control component without errors when disabled", () => {