openreplay/frontend/app/components/Session_/Inspector/InlineInput.tsx

import React, { useEffect, useRef } from 'react';
import cn from 'classnames';
import useInputState from 'App/hooks/useInputState';

interface Props {
	value: string;
	commit: (string) => void;
	className?: string;	
}

// TODO: maybe a better way exists?
const stopPropagation: React.KeyboardEventHandler = (e) => {
	if (e.key === 'Backspace' || e.key === 'Delete') {
	  e.stopPropagation();
	}
}

export default function InlineInput({ value, commit, className }: Props) {
	const [ valueState, onChange ] = useInputState(value);
	//useEffect(() => setValueState(value), [ value ]);

	const inputRef = useRef<HTMLInputElement>(null);
	useEffect(() => {
		inputRef.current?.focus();
 		inputRef.current?.setSelectionRange(0, value.length);
	}, [])

	const onKeyPress = e => {
		if (e.key === 'Enter') {
			commit(valueState);
			e.target.blur();
		}
	};
	const onBlur = () => {
		commit(valueState);
	}
	return (
		<input
			value={ valueState }
			size={ valueState.length }
			onChange={ onChange }
			onKeyPress={ onKeyPress }
			onKeyDown={ stopPropagation }
			onBlur={ onBlur }
			ref={ inputRef }
			className={ cn("font-mono", className) }
		/>
	);
}