Merge pull request #55 from MobileReality/fix/sensitive-rendering

fix: fixed rendering sensitive inputs

Author: gitsad

.changeset/sensitive-fields-mask-by-default.md

@@ -0,0 +1,10 @@
+---
+"@mobile-reality/mdma-renderer-react": patch
+---
+
+Fix sensitive form field masking in the default form renderer. Sensitive fields now start masked and
+stay masked while typing (showing `•••`), instead of revealing the value as you type — the `👁`/`🔒`
+toggle reveals it on demand. Also fixed the accompanying styles: masked inputs switch to
+`type="password"`, which had no matching CSS rule and collapsed to an unstyled native box, and the
+reveal/mask toggle button now sits as an overlay inside the input rather than wrapping onto its own
+line below it.

packages/renderer-react/src/components/FormRenderer.tsx

@@ -25,7 +25,7 @@ function DefaultSensitiveIndicator({ label }: FormSensitiveIndicatorElementProps
 // ─── Default sub-elements ────────────────────────────────────────────────────
 
 function DefaultInput({ id, type, value, onChange, required, sensitive }: FormInputElementProps) {
-  const [masked, setMasked] = useState(sensitive === true && value !== '');
+  const [masked, setMasked] = useState(sensitive === true);
   const displayType = masked ? 'password' : type;
 
   return (
@@ -36,10 +36,7 @@ function DefaultInput({ id, type, value, onChange, required, sensitive }: FormIn
         value={value}
         required={required}
         placeholder={sensitive ? `Enter ${type}...` : undefined}
-        onChange={(e) => {
-          onChange(e.target.value);
-          if (sensitive && masked) setMasked(false);
-        }}
+        onChange={(e) => onChange(e.target.value)}
       />
       {sensitive && value && (
         <button

packages/renderer-react/styles.css

@@ -506,6 +506,7 @@
 
 .mdma-form-field input[type="text"],
 .mdma-form-field input[type="email"],
+.mdma-form-field input[type="password"],
 .mdma-form-field input[type="number"],
 .mdma-form-field input[type="datetime"],
 .mdma-form-field input[type="datetime-local"],
@@ -540,6 +541,50 @@
   accent-color: var(--mdma-color-primary);
 }
 
+.mdma-input-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.mdma-input-wrapper input,
+.mdma-input-wrapper textarea {
+  flex: 1;
+  padding-right: 36px;
+}
+
+.mdma-sensitive-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--mdma-color-primary);
+  padding: 2px 4px;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.mdma-sensitive-toggle:hover {
+  opacity: 1;
+}
+
+/* File inputs stack their file list below, so the wrapper is a column, not an overlay row. */
+.mdma-input--file {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.mdma-input--file input[type="file"] {
+  padding-right: 0;
+}
+
 .mdma-form-submit {
   margin-top: 8px;
   padding: 8px 20px;