Replace the select2 dropdown boxes

[briri]

Create plan: edit field/combo box. Investigate a better input mechanism. Difficult for accessibility challenged users to use. Though does pass accessibility review.

[briri]

going to replace with the jquery option recommended by @JEK-III https://a11y.nicolas-hoffmann.net/autocomplet-list/

[briri]

@JEK-III @sjDCC @stephaniesimms here is a screenshot of what the jquery dropdown looks like right now. Let me know if I should tweak any of the fonts, colors, etc.

Note that the search it uses does a 'contains' style search so I can type 'Tech' and get 'Tampere University of Technology'. Its also case insensitive 👍

[stephaniesimms]

@briri omg it looks so much better! i think the font style and size should be as close as possible to matching those on the rest of the page ("Select the primary research org..."), but maybe @JEK-III can confirm.

[JEK-III]

I agree with Stephanie in terms of consistency, and also that this is already a huge improvement.

I do have a some of specific suggestions about the layout, but nothing critical– if anything is going to be too time-consuming, don't sweat it.

I'd style the clear field [X] buttons a little differently– using the font awesome times-circle icon or something similar. And, the proportions of the button are weird (too narrow), but I think the best thing would be to get rid of the border and shadow altogether and just have the icon. Finally, to cut down on clutter, if would be nice to hide the button entirely when the text entry field is blank.

The suggestion text in the dropdown feels pretty cramped; it could use 10 to 20px of padding all around. If possible, it would also be great to fix the width of the dropdown to be the same as the text entry field.

[briri]

Ok. replaced their [X] clear button with the fontawesome icon. Added some padding around the suggestions in the dropdown and bumped the width of the suggestions so that it matches the width of the textbox.

I also set it up so that the clear button only shows if there is text in the box.

[sjDCC]

Really like the rework. Looks great!

[JEK-III]

Agreed– this does look great!

[stephaniesimms]

Also noted in #150 create plan workflow, but maybe better to address separately here: Is it possible and/or advisable to provide a full dropdown list in addition to the type ahead selector? Specifically, I'm concerned about users knowing what to type for the Funding Org and think they might also need/want to see a list of options in some cases. Maybe the Fundref integration solves this issue?

Here's a screenshot of one solution from a login wireframe, but I'll defer to @JEK-III for advice here...

[JEK-III]

The feasibility of putting a full list of funders in really depends on whether we're limiting to funders with templates in the system (feasible) or all of fundref (not feasible).

[briri]

I agree that its a little unclear on what they should do with these new type-ahead boxes. We say 'select' in the instruction above the box but the user has to start typing something. If they don't know what to type though it can be confusing.

I was originally thinking it would be nice if they could hit the down arrow and just see the suggestions but the tool specifically prevents this (I assume to prevent having to show an enormous list). We could hack it to allow for that functionality but I'm reluctant to do that unless its something I could get them to include in their codebase. If they don't want it we'd then have to maintain our own version of their code.

[stephaniesimms]

@briri And I actually requested that you remove the language to "select" in the instruction boxes above because I think this will confuse users for the Org question in particular. I think it's more straightforward to just label the boxes "Primary research org" and "Funding org" with the primary question for each above.

But I expect usability testing would reveal that some users just don't know what to start typing in either box, especially in the funder box. Hacking is not desirable. Neither is an enormous dropdown list. Is it possible to filter Fundref to only display funders with templates in the system?

[sjDCC]

Perfect with the instruction to 'Begin typing to see a filtered list). These aren't showing on roadmap-staging yet so leaving for @stephaniesimms to close out.

One thing I noticed is that I naturally type the short form of the funder name i.e. NERC not natural environment research council, which means it doesn't come up. I assume we can just add the short forms in brackets at the end of the funder name though to fix this?

[stephaniesimms]

I just got some feedback about this very thing: someone looking for the "NASA" template. I agree we need to include short forms somehow and just wonder if that's supported by Fundref. I'll follow up with @briri and @JEK-III when they return next week. We can manually input the short forms for now at least.

[vyruss]

The new combobox has an issue with strings which contain an ampersand, when you select an Org like "Cowmilk & Cheese College" the returned string is "Cowmilk & Cheese College" which doesn't match the Org's ID and therefore is not selectable - see https://github.com/DMPRoadmap/roadmap/issues/270#issuecomment-304676180

[stephaniesimms]

all good on Roadmap stage now. closing out.

[vyruss]

@stephaniesimms should I create a separate issue for the ampersand bug?

[stephaniesimms]

i believe @sjDCC noted that she changed all & to "and," which should fix the problem. we don't use & in DMPTool.

[briri]

We should still fix it though as other people using the codebase may have special characters in their data. I think its acceptable to handle later

[stephaniesimms]

created new issue for CDL MVP #396