fix(TDOPS-4851): No copied message when switching back

Talend · Jul 31, 2023 · 52afe7c · 52afe7c
1 parent ee74810
commit 52afe7c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/.changeset/healthy-bears-explain.md b/.changeset/healthy-bears-explain.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+Form.Copy - Fix no copied message after switching back
diff --git a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx
@@ -31,30 +31,46 @@ const InputCopy = forwardRef(
 		ref: Ref<HTMLInputElement | null>,
 	) => {
 		const [copiedValue, setCopiedValue] = useState('');
+		const [changedTime, setChangedTime] = useState<number | null | undefined>(null);
 		const [copyError, setCopyError] = useState<Error | undefined | null>(null);
 		const [{ value: clipboardValue, error: clipboardError }, copyToClipboard] =
 			useCopyToClipboard();
 		const inputRef = useRef<HTMLInputElement | null>(null);
 		const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM);
 		const inputValue = value || defaultValue;
 
+		const updateChangeTime = (update: boolean) => {
+			setChangedTime(update ? Date.now() : null);
+		};
+		useEffect(() => {
+			if (inputValue) {
+				updateChangeTime(true);
+			}
+		}, [inputValue]);
 		useEffect(() => {
 			if (inputValue !== copiedValue) {
 				setCopiedValue('');
 				setCopyError(null);
+				updateChangeTime(false);
 			}
 		}, [inputValue, copiedValue]);
 
 		useEffect(() => {
-			setCopiedValue(clipboardValue as string);
-		}, [clipboardValue]);
+			if (changedTime && copiedValue !== inputValue) {
+				setCopiedValue(clipboardValue as string);
+				updateChangeTime(false);
+			}
+		}, [clipboardValue, changedTime]);
 
 		useEffect(() => {
 			setCopyError(clipboardError);
 		}, [clipboardError]);
 
 		useImperativeHandle(ref, () => inputRef.current);
-
+		const doCopy = () => {
+			copyToClipboard(inputRef.current?.value || '');
+			updateChangeTime(true);
+		};
 		const getDescriptionMessage = () => {
 			if (copyError) {
 				return copyError.message;
@@ -83,7 +99,7 @@ const InputCopy = forwardRef(
 					suffix={{
 						type: 'button',
 						icon: 'talend-files-o',
-						onClick: () => copyToClipboard(inputRef.current?.value || ''),
+						onClick: () => doCopy(),
 						disabled: !!disabled || !!readOnly,
 						children: t('FORM_COPY_COPY_TO_CLIPBOARD', 'Copy to clipboard'),
 						hideText: true,