Crash when my plugin dialog uses a password input

Adobe XD
1

I’m building a new plugin. The plugin displays a dialog with a <input type="password">. When I click inside the input, and outside the input, XD crashes. Changing to <input type="text">, the problem disappears, but that’s no I want to do…

2

What version of XD and OS are you running?

Also, try <sp-textfield type="password"> and see if you get better results.

3

cc @DavidXD – might be an issue in the XD control; we’ve seen this in the past with certain input types where there’s a missing method or whatnot that causes a crash.

4

Oh no! I was able to reproduce the crash on Windows, but not on Mac. Thank you for letting us know. I logged a bug with our team. In the meantime, I verified that Kerri’s suggested workaround doesn’t cause a problem:

<sp-textfield type="password" id="inputPasswordID" placeholder="Password"/>

5

I’m on Windows. For me, using <sp-textfield type="password" id="inputPasswordID" placeholder="Password"/> results in the following error:
Plugin ReferenceError: MutationObserver is not defined

6

That error looks like something that’s coming from the plugin itself – a variable named MutationObserver isn’t properly defined. Perhaps you’re querying for more than just #inputPasswordID and the selector is failing to return results?

7

The “change” event is not triggered on the <sp-textfield> webcomponent. So, it is unusable for me right now. Is there any replacement to use/workaround ?

8

You can use a wrapper component over the textfield when working with React. See: uxp-photoshop-plugin-samples/WC.jsx at main · AdobeDocs/uxp-photoshop-plugin-samples · GitHub

Alternatively, use a ref and add the change listener w/ addEventListener. As annoying as this is, from React’s perspective, this is expected behavior. :frowning:

This is doc’d here: https://www.adobe.io/photoshop/uxp/uxp/reference-spectrum/Overview/Using%20with%20React/, but will work for XD too.