Skip to content

feat(input): add password input support#947

Draft
LeTamanoir wants to merge 13 commits intoanomalyco:mainfrom
LeTamanoir:feat/password-input
Draft

feat(input): add password input support#947
LeTamanoir wants to merge 13 commits intoanomalyco:mainfrom
LeTamanoir:feat/password-input

Conversation

@LeTamanoir
Copy link
Copy Markdown
Contributor

Adds type: "password" support to the existing <input> component, masking
typed characters without any changes to the native rendering layer.

What's new

  • type option - "text" (default) or "password"
  • maskChar option - character used for masking, default "*", must be
    exactly 1 character; configurable at construction time or at runtime
  • Both options have getters/setters and trigger a re-render on change

Behaviour in password mode

  • Typed characters are displayed as maskChar; input.value always returns
    the real text
  • All events (INPUT, CHANGE, ENTER) emit the real value, not the masked
    one
  • getSelectedText() returns "" - clipboard-safe by default
  • Word-boundary navigation (Ctrl+←/→) jumps to absolute start/end instead
    of word boundaries
  • Word deletion (Ctrl+Backspace/Delete) deletes to start/end of the field
  • Placeholder renders normally when the field is empty
  • Horizontal scrolling works correctly on long passwords

Usage

// Renderable API
const input = new InputRenderable(renderer, {
  type: "password",
  maskChar: "●",   // optional, defaults to "*"
  placeholder: "Enter password…",
})
// React / Solid - props surface automatically
<Input type="password" maskChar="•" />

@LeTamanoir
Copy link
Copy Markdown
Contributor Author

Hey @simonklee, quick question on type: "password" support!

In password mode every character renders as *, which gets weird with wide characters. A 🎍 takes 2 columns in the buffer but only 1 as *, so a width: 5 input starts scrolling after just 2 emoji. Same issue with maxLength.

Should width/maxLength count graphemes (like HTML <input type="password"> does) or display columns of the real text (so emoji "cost double")?

Any preference or prior art you've seen? Happy to go either way!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant