Email recipient input widget

It already has been announced that we are working on a new theme for Roundcube. This is planned for version 1.4 and is in a very early state. However, we already started implementing some neat features that are nice to have especially when we’re talking about mobile devices support. Here I will show you one of these features.

It is more user friendly and usable especially on mobile to handle recipient addresses as boxes. So, when you enter a recipient it is automatically converted to a box. That element gives possibility to delete it very easily and visually better separates recipients. It also is more compact as it displays only recipient name (full recipient name and address will be displayed in a hover tip).


The implementation uses contentEditable div element for text input. So, this is different from what e.g. Gmail does (it uses textarea element). For now I see no issues with this approach. There’s still a place for style improvements and some alignments, but on a logic side it’s ready for use and I hope users will like it.

In future it could be extended with drag’n’drop support to move recipients between To, Cc, Bcc inputs. Do you have other ideas for this feature?

3 thoughts on “Email recipient input widget

  1. An ability for plugins to hook into this and add styles would be great. For example Posteo uses a similar widget that will show whether or not an a recipient uses DANE.

    Liked by 1 person

  2. Please don’t do it. Or at least offer an alternative style that doesn’t.
    This is one of the reasons why I’ve preferred RoundCube for my webmail for the last years:
    – It’s simple
    – It works in all browsers (including old ones! Current RoundCube in Firefox 12 is no problem. Will it stay that way?)
    – It shows what’s really there: The To-field is a comma-seperated list of e-mail addresses (optionally also containing the full names). -> Why not display it as exactly that? Why hide this behind some boxes?

    OK, for mobile I can understand your point, selecting part of a textfield is kind of troublesome there. But not on a computer, where I have a mouse to use for selecting the e-mail addresses I want to delete or edit(!).

    Honestly, if you do implement this, of cource it wouldn’t be a reason for me to stop using RoundCube. But this feature of having boxes around the e-mail addresses (which are then no longer directly editable) has only annoyed me ever since implemented it, and I was so far always glad that RoundCube doesn’t do it.


Comments are closed.