fix(emcn): keep focus on the input so the password Hide toggle actually masks

Author: waleedlatif1

packages/emcn/src/components/chip-modal/chip-modal.test.tsx

@@ -288,4 +288,26 @@ describe("ChipModalField inputType='password'", () => {
     expect(passwordInput().className).not.toContain(MASK_CLASS)
     expect(document.querySelector('[aria-label="Hide password"]')).not.toBeNull()
   })
+
+  it('hides a focused password instead of re-revealing it', () => {
+    mountPasswordField('hunter2-secret')
+    act(() => passwordInput().focus())
+
+    const toggle = document.querySelector<HTMLButtonElement>('[aria-label="Hide password"]')
+    if (!toggle) throw new Error('Hide toggle did not render')
+
+    // jsdom does not move focus on mousedown, so model what a browser does: the
+    // press blurs the input unless the handler prevents the default. Without the
+    // control's preventDefault that blur re-masks first, and the click then
+    // toggles back to revealed — leaving the password on screen.
+    act(() => {
+      const press = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+      toggle.dispatchEvent(press)
+      if (!press.defaultPrevented) passwordInput().blur()
+      toggle.click()
+    })
+
+    expect(passwordInput().className).toContain(MASK_CLASS)
+    expect(document.querySelector('[aria-label="Show password"]')).not.toBeNull()
+  })
 })

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -800,6 +800,20 @@ function handleSingleLineEnter(
  * is what stops a password manager autofilling the operator's own credentials
  * into a field that sets some other account's password.
  */
+interface ChipModalPasswordControlProps {
+  id: string
+  value: string
+  onChange: (value: string) => void
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  placeholder?: string
+  maxLength?: number
+  autoComplete?: string
+  disabled?: boolean
+  mono?: boolean
+  /** ARIA the owning {@link ChipModalField} derives from its own state. */
+  aria: ChipModalFieldAria
+}
+
 function ChipModalPasswordControl({
   id,
   value,
@@ -811,18 +825,7 @@ function ChipModalPasswordControl({
   disabled,
   mono,
   aria,
-}: {
-  id: string
-  value: string
-  onChange: (value: string) => void
-  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
-  placeholder?: string
-  maxLength?: number
-  autoComplete?: string
-  disabled?: boolean
-  mono?: boolean
-  aria: ChipModalFieldAria
-}) {
+}: ChipModalPasswordControlProps) {
   const [revealed, setRevealed] = React.useState(false)
 
   return (
@@ -853,6 +856,10 @@ function ChipModalPasswordControl({
             type='button'
             variant='ghost'
             disabled={disabled}
+            // Keep focus on the input: letting the button take it would fire the
+            // blur re-mask first, so the click would toggle back from `false`
+            // and "Hide" would leave a focused password on screen.
+            onMouseDown={(event) => event.preventDefault()}
             onClick={() => setRevealed((current) => !current)}
             className='size-6 flex-shrink-0 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
             aria-label={revealed ? 'Hide password' : 'Show password'}