Re-add multi-line placeholder for user invite in onboarding flow

[ErisDS]

Due to a problem with compiling the template, we had to remove the multiline placeholder for setup users. See #5454 and the PR #5455, for where this got removed.

Having a multiline placeholder on the user invite textarea in the onboarding flow is part of the spec - it's an important UX detail to ensure it's clear that emails should be added on new lines.

There are a number of options for how this could be done, including (but surely not limited to):

• moving the placeholder text to the controller
• using some JS to manipulate the placeholder after the DOM is loaded
• using a background image - removing it on focus and adding it on blur-if-empty

It's a fiddly little problem, but one worth solving if we can.

[kowsheek]

👍

I think JS might be the way to go. I checked out some of the other "Invite your friends" UXs and they seem to do similar things as the Google Drive modal:

The delimiter here are spaces, commas & semicolons. After which, they get sent to the server as an array of emails. It feels much cleaner that way.

Thoughts?

[jxhn]

@kowsheek: Great idea! I think maybe we'd prefer to keep the functionality of one-line-per email as that's already setup so unfortunately something like the Google Drive modal would be a no-go.

I have been messing around with a few different approaches and it seems that there's not much in terms of options that work across platforms.

• Moving the text to the controller does not help. There were issues in Firefox, I believe it pretty stringently upholds the "No CR's in placeholders" rule of HTML5.
• Attempted something with JQuery along the lines of putting the text in after the DOM. It resulted in only the first line being shown.
• There is a JQuery module for this issue, however I think it's a bit overkill.
• The background image may very well be the best way forward

[hoxoa]

What do you think of this JQuery module?
Just tested this in Firefox and it worked. Regarding the Readme all relevant browsers are supported and it's only 2.32 kB (the minified one).

[ErisDS]

Did I dream someone saying there was a CSS only way to do the background image? Maybe that was in slack?

[hoxoa]

@ErisDS Inspired by your comment, just tried it css only and got it half working.
Code:

<textarea class="test">

textarea[class=test] {
    background: url(http://placebacon.net/100/100);
}

textarea[class=test]:focus {
    background-image: none;
}

When you load a page with this code, you see a textarea with the image in it, if you click on it, the image disappears and the cursor is there. When you click outside, the image is back in. But if you click, write text in it and click outside, the text is in the textbox and the image is also there, in the background :(.
So I think we need to check if there is text in it or don't.

[jxhn]

@ErisDS That was myself in slack:

John O'Mahoney [18:27]
[@]hannah: One potential solution for the image multiline placeholder can be done in pure css, if we leverage the required attribute and have a css selector for :valid? Seeing as the user is likely to either skip or submit, the required is off no consequence?

John O'Mahoney [18:29]18:29
Added bonus of that is that the image stays even on focus until first character is typed just like a placeholder

Which doesn't present the issues talked about in @hoxoa's comment

[kowsheek]

While the CSS background is a decent idea for now, I feel we'd have to revisit this later and reimplement. The fact that we're having to go in a round-about way on this points that the approach isn't the best.

[JohnONolan]

I'm not sure that this is an appropriate use of :valid - but I'd be interested to see a prototype implementation

[lukaszklis]

@JohnONolan I've done a very quick codepen with the proposed background solution: http://codepen.io/lukaszklis/pen/xGYZEG (CSS + JS). This is not the best way of solving this, as placeholders behave differently in browsers. Webkit/Gecko engines will still display the placeholder until you start typing, on IE the placeholder would disappear completely.

By default, every form control that doesn't have required (or a specific type applied, i.e. email) is considered as valid. As "Invite others" is optional, I'm not sure if you want to have required attribute there. I've also created one more codepen with :valid and [required] usage: http://codepen.io/lukaszklis/pen/ZGrQKd. If you want to use this approach, keep in mind that some of the browsers may add some additional styling for elements that are invalid anymore (case when you focus the field, start typing, remove contents, blur).

Moreover, IE9 doesn't support :valid, so we may need some fallback there to get rid of the background picture.

[JohnONolan]

That is very cool indeed, and we don't support IE9, so no issues there. +1 from me 👍