Selecting autosuggest item in modal

[sathomas]

Continuation of #3632

[sathomas]

Not that we (AFAIK) have any East Asian languages at the moment, but when that does happen there will be another problem with Input Method Editors. Noting it here for now. http://blogs.msdn.com/b/ie/archive/2014/03/31/building-better-input-experience-for-east-asian-users-with-the-ime-api-in-ie11.aspx

[sathomas]

I'm having trouble reproducing the following

the biggest usability issue probably still is that it is required to tap twice to select a name from the list (once to remove keyboard / once to actually select).

As I type, e.g. a user name, the <input> scrolls up and exposes room for the autosuggest items. I can then tap directly on one of the autosuggest items and it immediately selects it, positions the cursor after the selections, and returns focus to the <input>. A low resolution GIF captured from the iOS simulator is below. It's easier to see on high resolution screen captures (esp. the actual iPhone):

• Actual iPhone 4S
• iOS Simulator

[nicolaasmatthijs]

@sathomas : Would you be able to submit a PR for this work so we can move this work forwards?

[sathomas]

Figured out the issue with selected items. The problem isn't functional, merely visual. When you tap to dismiss the keyboard, this generates a blur event on the <input> element. Deep in the bowels of the jQuery autosuggest plugin (around line 202 in our version), that blur event causes the plugin to add a blur class to the item.

$("li.as-selection-item", selections_holder).addClass("blur").removeClass("selected");

The .blur class is styled distinctly in the tenant skin style sheet. Around line 727:

ul.as-selections li.as-selection-item.blur {
    .background-gradient-two(@pill-blur-gradient1-color, @pill-blur-gradient2-color);
    border-color: @pill-blur-border-color;
    color: @pill-blur-color;
}

So when the user taps on Done to dismiss the iOS keyboard, the visual appearance of the autosuggest item changes, but it's still treated as being selected. So clicking on Save does cause the selected user to be added.

I can think of several ways to fix this, none of which sound all that wonderful.

• Modify the third-party autosuggest plugin to accept an option that disables adding the blur class, and then use that option for share autosuggests.
• Add our own hook to the blur event for the <input> element and have that event handler restore focus.
• Change the skin styles for autosuggest items so that .blur has no effect.
• Define a more specific CSS rule for autosuggest items with the blur class that are within share modals and have that rule nullify the normal rules for .blur.

@nicolaasmatthijs, @bp323 : Thoughts?

[sathomas]

BTW, is it a problem that we have separate icons for "Manage access" and "Share"

Yet both trigger modal dialogs with the same title ("Manage access")?

At least for debugging, I find it confusing.

[sathomas]

Looking through the code, it appears we only use the autosuggest plugin in three widgets -- manageaccess, setpermissions, and share. In manageaccess and share it doesn't look like the blur class serves any purpose. I think that may be the case for setpermissions also. If that's the case, we can just remove the styling for .blur from the user skin styles.

Here's the issue with setpermissions. Initially, any "ghost" items have the class blur which (to me) makes them appear as if they're not selected. See My library in the screen shot below.

You can click or tap on the item and it then appears selected

Note, though, that there is no way at this point to "unselect" the item, so it appears as if there's no way for a user to undo an action they just did.

To be honest, I find this whole behavior so confusing from a user experience standpoint that I can't really guess at how the interface is supposed to work. Maybe, though, the setpermissions "ghost" items should never appear unselected (since it's not possible to delete them). If that's the case, I think we can simply delete the .blur styles.

[nicolaasmatthijs]

Note that I still don't fully understand how the blur style is related to the fact that you have to tap an autosuggest item twice to select it on a mobile device. However, as part of the folder behaviour improvements, it made sense to remove the blur style anyway, so that should make it to master soon.