Mail: Recipient selection UX issues

[uli-heller]

Expected behavior

After entering to, subject and message, the send button should become active so I can send new messages

Actual behavior

The button remains inactive, see screenshot above. Replying to an existing message works fine, though.

Mail app

Mail app version: 1.1.3

Mailserver or service: Postfix

Server configuration

Operating system: Ubuntu-18.04
Web server: Apache
Database: MariaDB
PHP version: 7.2

Nextcloud Version: 18.0.1 and 18.0.2 - I created a common mail configuration for all users via Groupware - MailApp

Client configuration

Browser: Chrome 80.0.3987.132
Operating system: Ubuntu

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[uli-heller]

I tried to activate the button via browser developer tools. Pressing "send" afterwards leads to this:

Strange: Sending mails works when replying to an existing message...

[ChristophWurst]

You didn't select the recipient. Click the suggested row in the dropdown to make a selection.

Sorry for the confusion. We have to improve this.

[uli-heller]

@ChristophWurst : I'm trying to select the recipient, but it does not seem to be possible. Clarification: It is possible, but strange...

• I typed the email address
• A drop down appears
• Clicking on the dropdown shows a "hook"
• You have to click somewhere outside of the dropdown to effectively "select" the entry

Afterwards, the "send" button is active and sending the email works OK.

[ChristophWurst]

Yep, that is the UX flaw I tried to describe.

I don't think there is a better description of the problem, so let's actually keep this ticket open.

[rakekniven]

Related discussion:

https://help.nextcloud.com/t/mail-send-buttion-greyed-out/77114

Looks like the UX should be improved here.

[jancborchardt]

The "To" and "Cc/Bcc" fields have some additional UX issues when compared to other mail apps:

• [ ] You should not need to click into the dropdown to have the email you put in accepted. The dropdown is for suggestions, not the reflection of the list.
• [ ] When you have content in the "to" field and click in it, the dropdown shows but the content vanishes from the field, very strange.
• [ ] Just putting in emails separated by comma should work, but now it seems to error as the app thinks it’s all one email
• [ ] When you have nothing in the field, it doesn’t make sense to show the dropdown at all

[ChristophWurst]

@nextcloud/mail who can help with this?

[janklostermann]

I have a behavior I did not see described here yet, but is related:

Trying to type a new email address into the To: field starts showing the pop-up selector that takes over what is written into the To: field for the first letters, but then stops.
I can continue to write the full email into the To: field behind the selector, but the selector stays with these first letters.
(How many is quite arbitrary, seems to depend on the writing velocity in the beginning: What was already written at the startup processing of the pop-up selector is taken, the rest not any more.)

The app will not accept the written address in the To: field, but only the stuff from the pop-up selector. Having the address in the To: field and selecting one of the multiple available empty lines from the selector provides me with an activation of the send button, but when I click the send button, it either gives an error message about a missing sender or once it even said Sent! but nothing is received at the address from the To: field.

Very wired! Makes the sending of new emails (where you cannot reply) impossible. :-(((

I have this behavior in current Chromium and Firefox on Ubuntu 18.4. with Mail 1.1.2 and NC 18.0.3.

[mlthlschr]

Looks like it is a problem/flaw of the multiselect given by nextcloud. I just tried using the original multiselect, like as follows (adding vue-multiselect to package.json first):

// import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
import Multiselect from 'vue-multiselect'

Here it behaves better/as in the examples found in the docs. Maybe someone needs to take a look what is happening with multiselect in nextcloud-vue.

[ChristophWurst]

:eyes: @skjnldsv

[Minocula]

Hi there....is this "bug" still open? It is such a basic function to send mails and we plan to show that great product more to the people but with bugs like this...its hard to say. Is there a workarround? we use nextcloud for docker Version 19.0.0 / Mail 1.3.5. now 1.4.0

Kind regards and I hope you can fix that...

[ChristophWurst]

@Minocula as you can tell from the activity there were no updates.

[alexanderdd]

As mentioned here https://github.com/nextcloud/mail/issues/3242 pressing tab after typing a name should add that recepient.

That issue is now closed because this functionality should be covered by this issue here.

[jancborchardt]

Issues we found during the brainstorming:

• As @uli-heller said above, when not explicitly clicking on a result in the list, the value is not taken. Ref https://github.com/shentao/vue-multiselect/issues/536 – we could use the blur event (which could work for mouse click in another field as well as tab)
• We modify the component so that when you click into the field, it doesn’t show in the input anymore – this is confusing and we should just use the default.
• Adding a comma inbetween email addresses is not recognized as separate entries.
• If we have avatars of the people (e.g. from Contacts or user management) it would be nice to show those in the dropdown as well as in the chips.

[dehnhardt]

@jancborchardt
We modify the component so that when you click into the field, it doesn’t show in the input anymore – this is confusing and we should just use the default.
Do you mean the manual written search-text should be deleted? If not, this should be added as well ti this issue. It's annoying to have to delete the written search-text to add the next recipient.

[jancborchardt]

No, nothing should ever be deleted from the input unless people specifically delete it via backspace or pressing on the x next to the email chips. :)

What I mea is that it's weird that if you e.g. have 2 emails in the "To" field and click in it, the 2 emails vanish and only show in the dropdown. The component we use (https://vue-multiselect.js.org ) does not do this, and it's much better.

[dehnhardt]

Maybe you didn't really understand what I meant: If I want to enter multiple recipients, I start typing "jan b" for example. Then Jan Borchardt appears in the drop-down list and I select him. I would like to select Christoph Wurst as another recipient. So I start typing, but there is still "jan b" in the editbox - although I have already added Jan Borchard. So I have to delete "jan b" from the edit box before I can start typing "christoph...".
Are you sure that this is the desired behaviour I get upset about it every time.
If it's meant to be, it would be a compromise to highlight the letters you typed. Then I can either delete them with one keystroke or keep the already entered text by typing "arrow left" once.

[alexanderdd]

@ChristophWurst can you put this on the road map? https://github.com/nextcloud/mail/projects/10

IMO this is the biggest UX bug at the moment.

[ChristophWurst]

We are aware of that, thanks. Roadmap is merely for features.