Skip to content

feat(#312): adds support for the masked appearance#655

Merged
garethbowen merged 3 commits intomainfrom
312-mask
Feb 17, 2026
Merged

feat(#312): adds support for the masked appearance#655
garethbowen merged 3 commits intomainfrom
312-mask

Conversation

@garethbowen
Copy link
Collaborator

Closes #312

I have verified this PR works in these browsers (latest versions):

  • Chrome
  • Firefox
  • Safari (macOS)
  • Safari (iOS)
  • Chrome for Android
  • Not applicable

What else has been done to verify that this works as intended?

Why is this the best possible solution? Were any other approaches considered?

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Do we need any specific form for testing your changes? If so, please attach one.

The all questions form works.

What's changed

@changeset-bot
Copy link

changeset-bot bot commented Feb 16, 2026

🦋 Changeset detected

Latest commit: 5fe6db0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@getodk/web-forms Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Collaborator

@latin-panda latin-panda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have one small question below, but I am approving now to unblock

:model-value="node.currentState.value"
:feedback="false"
fluid
toggleMask
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
toggleMask
toggle-mask

It has this warning from GH

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yikes, thanks!

I've modified the eslint config so this is now an error not a warning so it's easier to spot. Are you ok with that upgrade?

<Password
:id="node.nodeId"
:required="node.currentState.required"
:disabled="node.currentState.readonly"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the input is disabled, I can still reveal the secret word. Is that okay?

Screen.Recording.2026-02-17.at.8.58.17.PM.mov

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's ok because my understanding of the purpose of this feature is to hide the content from shoulder surfers, not from the user. If you really don't want the user to see it then you shouldn't display it in the form at all (ie: make the field not relevant).

@garethbowen garethbowen merged commit 859699c into main Feb 17, 2026
54 checks passed
@garethbowen garethbowen deleted the 312-mask branch February 17, 2026 21:56
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.

Add masked appearance

2 participants