Forem Creators and Builders 🌱

Cover image for Changelog: new tag selector in the editor
Suzanne Aitchison for Forem Core Team

Posted on

Changelog: new tag selector in the editor

Hello Forem Creators!

I'm pleased to announce another small improvement to the publishing experience: a new interface for searching and selecting tags 🎉

How does it work?

The base functionality of the selector hasn't changed too much - you should be able to click into the tags field, see suggestions of "Top tags" and type to search for the tag you want.

Adding a tag

You can add a tag to your post by doing one of the following:

  • Clicking a tag that appears as a suggestion in the dropdown
  • Using the Up/Down arrow keys to highlight a suggestion and pressing Enter
  • Typing a , or space after your tag name (e.g. typing "changelog,"
  • Typing your tag name and simply clicking elsewhere in the page to "move away" from the selector

Editing or removing a tag

Once your tag is added, it should be clearly reflected in the UI as a set of buttons. Clicking the 'X' will remove the tag, and clicking the tag's text will put it into "edit mode" for you to make any changes.

If you are currently typing a long list of tags, you can also pop your previously added tag into "edit mode" by pressing Backspace while you're in the empty text field.

What problems does it solve?

We've had reports of various issues with the previous tag selector, which we believe this new version resolves. Particularly:

  • It wasn't very clear when a tag had been successfully added
  • If you added a lot of long tags, the field scrolled horizontally and became hard to read/edit
  • The old selector created a "focus trap" on the page - when you used the keyboard to navigate through the form you would get stuck in the tags field
  • It didn't provide any feedback to screen reader users, and didn't conform to a lot of accessibility best practices for this kind of component

That's it!

We look forward to hearing how folks find the new tag selection experience, and if you have any feedback or questions please let us know!

Top comments (2)

thomasbnt profile image
Thomas Bnt

Better design !

Good update @s_aitchison ! 🎉

ildi profile image

Awesome update! I specifically love that as soon as you click the tag selector you are presented with the top tags list. I think new users of any Forem community will find this useful.