feat: add focus and blur handlers for encrypted text input

Author: qinshuang1998

ui/src/components/TextComponent/TextComponent.tsx

@@ -15,10 +15,26 @@ export interface TextComponentProps {
 }
 
 class TextComponent extends Component<TextComponentProps> {
+    private wasMasked: boolean = false;
+
     handleChange = (e: unknown, { value }: { value: string | number }) => {
         this.props.handleChange(this.props.field, value);
     };
 
+    handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (this.props.encrypted && e.target.value === '******') {
+            this.wasMasked = true;
+            this.props.handleChange(this.props.field, '');
+        }
+    };
+
+    handleBlur = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (this.props.encrypted && e.target.value === '' && this.wasMasked) {
+            this.props.handleChange(this.props.field, '******');
+            this.wasMasked = false;
+        }
+    };
+
     render() {
         const { id, field, disabled, value, encrypted, ...restProps } = this.props;
         const restSuiProps = excludeControlWrapperProps(restProps);
@@ -30,6 +46,8 @@ class TextComponent extends Component<TextComponentProps> {
                 disabled={disabled && 'dimmed'}
                 value={value === null || typeof value === 'undefined' ? '' : value.toString()}
                 onChange={this.handleChange}
+                onFocus={this.handleFocus}
+                onBlur={this.handleBlur}
                 type={encrypted ? 'password' : 'text'}
             />
         );