fix: check form data after blur

src/components/copy-button/index.tsx

@@ -5,6 +5,7 @@ import ClipboardJS from 'clipboard';
 import React, { useEffect, useRef, useState } from 'react';
 
 type CopyButtonProps = {
+  children?: React.ReactNode;
   text: string;
   disabled?: boolean;
   fontSize?: string;
@@ -26,6 +27,7 @@ type CopyButtonProps = {
 };
 
 const CopyButton: React.FC<CopyButtonProps> = ({
+  children,
   tips,
   text,
   disabled,
@@ -91,7 +93,9 @@ const CopyButton: React.FC<CopyButtonProps> = ({
             <CopyOutlined style={{ fontSize: fontSize, ...style }} />
           )
         }
-      ></Button>
+      >
+        {children}
+      </Button>
     </Tooltip>
   );
 };

src/components/label-selector/index.tsx

@@ -9,11 +9,13 @@ interface LabelSelectorProps {
   btnText?: string;
   description?: React.ReactNode;
   onChange?: (labels: Record<string, any>) => void;
+  onBlur?: (e: any, type: string, index: number) => void;
 }
 
 const LabelSelector: React.FC<LabelSelectorProps> = ({
   labels,
   onChange,
+  onBlur,
   label,
   btnText,
   description
@@ -87,6 +89,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
       onChange={handleLabelsChange}
       onLabelListChange={handleLabelListChange}
       onPaste={handleOnPaste}
+      onBlur={onBlur}
     />
   );
 };

src/components/label-selector/inner.tsx

@@ -13,6 +13,7 @@ interface LabelSelectorProps {
   onLabelListChange: (list: { key: string; value: string }[]) => void;
   onChange?: (labels: Record<string, any>) => void;
   onPaste?: (e: any, index: number) => void;
+  onBlur?: (e: any, type: string, index: number) => void;
   description?: React.ReactNode;
 }
 
@@ -22,6 +23,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   onChange,
   onLabelListChange,
   onPaste,
+  onBlur,
   label,
   btnText,
   description
@@ -82,6 +84,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
               onDelete={() => handleOnDelete(index)}
               onChange={(obj) => handleOnChange(index, obj)}
               onPaste={(e) => onPaste?.(e, index)}
+              onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
             />
           );
         })}

src/components/label-selector/label-item.tsx

@@ -19,6 +19,7 @@ interface LabelItemProps {
   labelList: { key: string; value: string }[];
   onChange?: (params: { key: string; value: string }) => void;
   onPaste?: (e: any) => void;
+  onBlur?: (e: any, type: string) => void;
 }
 const LabelItem: React.FC<LabelItemProps> = ({
   label,
@@ -28,7 +29,8 @@ const LabelItem: React.FC<LabelItemProps> = ({
   valueAddon,
   onChange,
   onDelete,
-  onPaste
+  onPaste,
+  onBlur
 }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
@@ -49,7 +51,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
     });
   };
 
-  const handleKeyOnBlur = (e: any) => {
+  const handleKeyOnBlur = (e: any, type: string) => {
     const val = e.target.value;
     // has duplicate key
     const duplicates = _.filter(
@@ -68,6 +70,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
     } else {
       setOpen(false);
     }
+    onBlur?.(e, type);
   };
 
   return (
@@ -83,7 +86,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
               label={intl.formatMessage({ id: 'common.input.key' })}
               value={label.key}
               onChange={handleOnKeyChange}
-              onBlur={handleKeyOnBlur}
+              onBlur={(e: any) => handleKeyOnBlur(e, 'key')}
               onPaste={onPaste}
             ></SealInput.Input>
           </Tooltip>
@@ -97,6 +100,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
             label={intl.formatMessage({ id: 'common.input.value' })}
             value={label.value}
             onChange={handleOnValueChange}
+            onBlur={(e: any) => onBlur?.(e, 'value')}
           ></SealInput.Input>
         )}
       </div>

src/components/list-input/hint-input.tsx

@@ -6,6 +6,7 @@ interface HintInputProps {
   value: string;
   label?: string;
   onChange: (value: string) => void;
+  onBlur?: (e: any) => void;
   placeholder?: string;
   sourceOptions?: Global.HintOptions[];
 }
@@ -13,7 +14,7 @@ interface HintInputProps {
 const matchReg = /[^=]+=[^=]*$/;
 
 const HintInput: React.FC<HintInputProps> = (props) => {
-  const { value, label, onChange, sourceOptions } = props;
+  const { value, label, onChange, onBlur, sourceOptions } = props;
   const cursorPosRef = React.useRef(0);
   const contextBeforeCursorRef = React.useRef('');
   const [options, setOptions] = React.useState<
@@ -89,6 +90,7 @@ const HintInput: React.FC<HintInputProps> = (props) => {
       onInput={handleInput}
       onSelect={handleOnSelect}
       onFocus={getContextBeforeCursor}
+      onBlur={onBlur}
       label={label}
       options={options}
       style={{ width: '100%' }}

src/components/list-input/index.tsx

@@ -15,6 +15,7 @@ interface ListInputProps {
   placeholder?: string;
   labelExtra?: React.ReactNode;
   onChange: (data: string[]) => void;
+  onBlur?: (e: any, index: number) => void;
 }
 
 const ListInput: React.FC<ListInputProps> = (props) => {
@@ -24,6 +25,7 @@ const ListInput: React.FC<ListInputProps> = (props) => {
     label,
     description,
     onChange,
+    onBlur,
     btnText,
     options,
     labelExtra
@@ -89,6 +91,7 @@ const ListInput: React.FC<ListInputProps> = (props) => {
               options={options}
               key={item.uid}
               value={item.value}
+              onBlur={(e) => onBlur?.(e, index)}
               onRemove={() => handleOnRemove(index)}
               onChange={(val) => handleOnChange(val, index)}
             />

src/components/list-input/list-item.tsx

@@ -8,6 +8,7 @@ import './styles/list-item.less';
 interface LabelItemProps {
   onRemove: () => void;
   onChange: (value: string) => void;
+  onBlur?: (e: any) => void;
   value: string;
   label?: string;
   placeholder?: string;
@@ -15,7 +16,7 @@ interface LabelItemProps {
 }
 
 const ListItem: React.FC<LabelItemProps> = (props) => {
-  const { onRemove, onChange, label, value, options } = props;
+  const { onRemove, onChange, onBlur, label, value, options } = props;
 
   const handleOnChange = (value: any) => {
     onChange(value);
@@ -26,6 +27,7 @@ const ListItem: React.FC<LabelItemProps> = (props) => {
       <HintInput
         value={value}
         onChange={handleOnChange}
+        onBlur={onBlur}
         label={label}
         sourceOptions={options}
         placeholder={props.placeholder}

src/components/seal-form/auto-complete.tsx

@@ -1,6 +1,6 @@
 import { AutoComplete, Form, Spin } from 'antd';
 import type { AutoCompleteProps } from 'antd/lib';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
@@ -15,6 +15,7 @@ const SealAutoComplete: React.FC<
     isInFormItems = true,
     trim = true,
     onSelect,
+    onBlur,
     extra,
     style,
     addAfter,