Adobe Tech Blog
Published in

Adobe Tech Blog

Spectrum Textfield Issues in Photoshop & XD MAX 2021 Releases

Apply these workarounds to avoid issues after Adobe MAX.

This article is for developers of UXP (Unified Extensibility Platform) plugins who use one or more Spectrum sp-textfield components.

In UXP 5.5.1 (the version shipping at Adobe MAX 2021 in both Adobe XD version 45 and Photoshop version 23), there are some issues that may impact the usability of your plugin. You may wish to apply some of these workarounds in order to avoid any issues after MAX.

Finder hitting a key on a keyboard with the text “We have a problem…”

Issues you may encounter

  • sp-textfield doesn’t fire change
  • Setting a numeric sp-textfield’s value attribute can fail
  • Typing a decimal point in a numeric sp-textfield is difficult

sp-textfield doesn’t fire “change"

Applies to PS 23 and XD 45
sp-textfield won’t send change events. If your code relies upon change events for functionality this may cause issues in your plugin. For example, if you rely on change to handle validation checks, then those validation checks won’t run when you expect. If you rely on change to update other UI widgets, those will also fail to be updated.

Manual workarounds
Other events on sp-textfield continue to work, including input, focus, and blur. As such, you may elect to use these events instead of change.

You can also switch from sp-textfield to sp-textarea if your design will accommodate it. Alternatively, you can switch to the native input type=”text” widget temporarily.

Automatic workaround
Alternatively, you can drop in the following code snippet in your index.html or your main JavaScript file. This code will attempt to synthesize the change event whenever a change occurs in sp-textfield widgets. This is done by hooking into the focus and blur events. It works with both Vanilla and React. It’s not been tested with other frameworks.

Setting a numeric sp-textfield’s value attribute can fail

Applies to PS 23 and XD 45
If you set the value attribute of a numeric sp-textfield, you should do so using strings, as the implicit type conversion will fail.

Manual workaround
There’s no drop-in code to address this issue. Instead, you should be certain that you’re assigning a string representation of a number instead of the actual number itself.

Typing a decimal point in a numeric `sp-textfield` is difficult

Applies to PS 23
Typing a decimal point as part of a non-integer number can be difficult. Users may need to repeat the keystroke several times before the decimal point stays.

Manual workarounds
You can temporarily switch from <sp-textfield type=”number”> to <sp-textfield type=”text”>. This does mean that users could enter non-numeric data, but you can add validators to handle this.

You could also switch to input type=”text” temporarily.

Automatic workaround
Alternatively, you can use the following drop-in workaround. It detects any new numeric sp-textfield widgets and automatically converts them to a regular text field. It then adds a handler that forces the contents of the field to be numeric. Note that the type of the value attribute remains a string, so you’ll need to convert the value to a number if you intend on using it as such (e.g., Number(field.value))

Next Steps

Now that you know the issues, what should you do next?

First: You should immediately test your plugins in the prerelease builds of Photoshop and/or XD. (To join the Photoshop or XD prerelease groups, if you’re not already a member, reach out to finnegan@adobe.com.) This will help you determine if your plugins are impacted by the issues.

While the issues themselves are present in all builds, how your plugin is impacted will be based upon your code. If you use input instead of change, for example, you’re unlikely to be impacted by the fact that sp-textfield doesn’t want to fire the change event.

Second: apply the appropriate remediations to your plugin and re-test.

You may elect to use the automated workarounds above to help address the issue more quickly, but you should still test your plugin to ensure that these workarounds provide an acceptable experience.

Third: if you’ve made changes, resubmit your plugin to the marketplace.

Please be sure to let us know if you submit a change so that we can ensure your fix is approved before MAX. Email xdplugindevs1@adobe.com, or respond in our forum thread here.

If you have questions or run into issues, please don’t hesitate to reach out.

Person with cool sunglasses behind the MAX log

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store