Password input field is broken

Adobe XD UXP Plugin API
,
#1

It looks like input type=‘password’ doesn’t fire change or keyup event on Windows. I checked it with following code:

console.log("ngAfterViewInit", this.passwordInput.nativeElement.tagName);
this.passwordInput.nativeElement.addEventListener(
	"keyup",
	(e) => { console.log("changed", this.passwordInput.nativeElement.value); });

As output I’m getting correct tag name INPUT but event never fires. It worked before but looks to be broken in one of the recent releases.

UPD: input.value also returns empty string… It looks like the only workaround is to replace password with text input.

1 Like
#2

There are some known issues around password fields – see the third bullet point under https://www.adobe.io/photoshop/uxp/uxp/known-issues/#spectrum-uxp-components and last point under https://www.adobe.io/photoshop/uxp/uxp/known-issues/#html-elements. Also see penultimate point under https://www.adobe.io/photoshop/uxp/uxp/known-issues/#events (textfields and the like love to swallow most of the events.)

For inputs, use change or input, instead of key% events.

I thought I had an example somewhere of using blur and focus to deal with the password issues; let me see if I can find it again.

2 Likes
#3

Ack; just realized I pointed you to Photoshop Docs for an XD question.

The example I dig up should work either way, though.

#4

Thanks for the update. Really I checked change event and it doesn’t work either. Also it’s impossible to get password field value through the value property which makes it completely useless. And the issue I’m talking about is on Windows.
We switched to the plain text field but it looks a bit unsecured )

#5

What version of XD are you using?

If you’re on XD 36 or better, you can use sp-textfield, which works.

<sp-textfield type="password" value="hello">
  <sp-label slot="label">Password:</sp-label>
</sp-textfield>

I was able to listen to change and input on it. keyup also works on Windows, but I wouldn’t use keyboard events like this here, since it won’t work on macOS (change and input will, though).

1 Like
#6

sp-textfield works but it has slightly broken layout - text is doubled and asterisk is missed even if field is required. But it triggers events.
image

#7

I’ll note that sp-label is optional, if you want to supply your own label instead

You can add * yourself to the label to indicate required state, or sp-label understands isrequired="true" and will put a * for you.

You can also lay the filed out horizontally, like so:

<sp-textfield type="password" style="width: 300px; display: flex; flex-direction: row; align-items: baseline;" >
    <sp-label style="padding-right: 16px;" slot="label" isrequired="true" variant="left" >Password</sp-label>
</sp-textfield>

This results in:

image

2 Likes
#8

Update here: [Workaround] Password input is broken on Windows for XD 36