fix(web): searchbox cursor shifts to end in controlled component

Author: SavvyShah

packages/web/src/components/search/SearchBox.js

@@ -56,7 +56,6 @@ import {
 	connect,
 	decodeHtml,
 	extractModifierKeysFromFocusShortcuts,
-	handleCaretPosition,
 	isEmpty,
 	parseFocusShortcuts,
 } from '../../utils';
@@ -75,6 +74,19 @@ const useConstructor = (callBack = () => {}) => {
 	setHasBeenCalled(true);
 };
 
+/**
+ * inputValue:
+ * The value which is passed to the html input box.
+ * The onChange handler(event listener on input box) should directly update inputValue.
+ *
+ * For uncontrolled components, we maintain the input value(useState - currentValue).
+ * Hence, onChange should call setValue to update currentValue directly.
+ *
+ * For controlled components, we get the input value(props.value).
+ * Hence, onChange should call props.onChange,
+ * which then updates currentValue by calling setValue in useEffect.
+ */
+
 const SearchBox = (props) => {
 	const {
 		selectedValue,
@@ -506,9 +518,6 @@ const SearchBox = (props) => {
 		if (value === undefined) {
 			setValue(inputValue, false, props, undefined, true, false);
 		} else if (onChange) {
-			// handle caret position in controlled components
-			handleCaretPosition(e);
-
 			onChange(
 				inputValue,
 				({ isOpen } = {}) => {
@@ -992,6 +1001,11 @@ const SearchBox = (props) => {
 		}
 	}, [rawData, aggregationData, isLoading, error]);
 
+	/**
+	 * For uncontrolled component,
+	 * props.value would be changed directly,
+	 * which then needs to update currentValue by calling setValue
+	 */
 	useEffect(() => {
 		if (hasMounted.current) {
 			if (
@@ -1413,7 +1427,7 @@ const SearchBox = (props) => {
 											{...getInputProps({
 												className: getClassName(props.innerClass, 'input'),
 												placeholder: props.placeholder,
-												value: currentValue === null ? '' : currentValue,
+												value: Object.hasOwn(props, 'value') ? props.value : currentValue || '',
 												onChange: onInputChange,
 												onBlur: withTriggerQuery(props.onBlur),
 												onFocus: handleFocus,
@@ -1473,7 +1487,7 @@ const SearchBox = (props) => {
 								aria-label={props.componentId}
 								className={getClassName(props.innerClass, 'input') || null}
 								placeholder={props.placeholder}
-								value={currentValue || ''}
+								value={Object.hasOwn(props, 'value') ? props.value : currentValue || ''}
 								onChange={onInputChange}
 								onBlur={withTriggerQuery(props.onBlur)}
 								onFocus={withTriggerQuery(props.onFocus)}

packages/web/src/utils/index.js

@@ -50,20 +50,6 @@ export const isIdentical = (a, b) => {
 };
 export const getValidPropsKeys = (props = {}) =>
 	Object.keys(props).filter(i => validProps.includes(i));
-/**
- * Handles the caret position for input components
- * @param {HTMLInputElement} e
- */
-export const handleCaretPosition = (e) => {
-	if (window) {
-		const caret = e.target.selectionStart;
-		const element = e.target;
-		window.requestAnimationFrame(() => {
-			element.selectionStart = caret;
-			element.selectionEnd = caret;
-		});
-	}
-};
 // elastic search query for including null values
 export const getNullValuesQuery = fieldName => ({
 	bool: {