You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
777 B
35 lines
777 B
import type { FunctionComponent } from "react";
|
|
import React, { useState } from "react";
|
|
|
|
interface BlurTextInputProps {
|
|
value: string;
|
|
onBlurText: (text: string) => void;
|
|
}
|
|
|
|
const BlurTextInput: FunctionComponent<BlurTextInputProps> = ({
|
|
value,
|
|
onBlurText,
|
|
}) => {
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
const [text, setText] = useState(value);
|
|
|
|
return (
|
|
<input
|
|
type="text"
|
|
value={isFocused ? text : value}
|
|
onChange={(e) => setText(e.target.value)}
|
|
onFocus={() => {
|
|
setIsFocused(true);
|
|
setText(value);
|
|
}}
|
|
onBlur={(e) => {
|
|
setIsFocused(false);
|
|
if (e.target.value !== value) {
|
|
onBlurText(e.target.value);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default BlurTextInput;
|
|
|