Autoentry of URL for selected repository

magicalmary commented 2 months ago

In the proposed output section of the DMP Tool, users are asked to enter the repository that will be used. Then, they must enter the URL for the same repository. The additional data entry for the repository can be frustrating, when the repository is well established and its URL might be included in the metadata.

Describe the solution you'd like When the repository name is selected from the dropdown list, 'Repository URL' should autofill with the URL if available in the metadata found through the API. Users should not have to manually enter this for known repositories.

Screenshot 2024-04-29 at 3 18 26 PM

briri commented 2 months ago

When a user selects an item from the list it should auto-fill the description and URL, not force the user to type in something. It should actually disable the fields too so that the user cannot change them

jupiter007 commented 2 months ago

@magicalmary @briri I went onto stage and tried to reproduce. What I noticed is that when a user selects an option from the dropdown, then the URL field is hidden. Maybe that's because we assumed we have the URL if the name existed in the dropdown?

https://github.com/CDLUC3/dmptool/assets/8452761/7fb2c597-7af8-42f7-942a-d34f1d061013

One bug is that the "help" text for the URL field still shows, even though we hide the URL input.

briri commented 2 months ago

Ahh. I wonder if they're seeing the one they want, but not selecting/clicking on it and just pressing tab or another key, so it considers it a manual entry rather than a selection of one in the list

jupiter007 commented 2 months ago

As Brian mentioned, a user can enter a value into the Search input field, and tab out, and their entry is saved without them being forced to select an option from the drop-down list/tooltip. So, even though their entered value actually matches an existing repository, a new, duplicate one is created. Also, the user's entry is displayed as the first option in the drop-down, implying that their entry was a pre-existing repository. If they do select that option from the drop-down, they are, again, creating potential duplicates.

I discussed this ticket in our daily standup today with @briri and @magicalmary and we determined that in order to properly address this issue, we need to:

Update the typeahead to not place the user's entered value at the top of the select drop-down, since this implies that it was an existing option, and is a bit misleading to the user
Update the typeahead so that a user has to select an item from the drop-down, instead of being able to tab out of it without making a selection.
Add "Other" as a drop-down option. We can anchor it to the bottom or top of the drop-down window to make sure the user sees it. If they select "Other", than we can display an input field for the user to enter a new repository name.
Additionally, we should initially hide the Description and URL fields, and only display them when a user selects the "Other" option to enter a new name.

jupiter007 commented 2 months ago

I've attached an example of how a Typeahead with "Other" could work:

https://github.com/CDLUC3/dmptool/assets/8452761/2398aef4-f98e-4ae7-9209-f2d182f7959d

jupiter007 commented 2 months ago

Here's a great article on how to make an accessible autosuggest field using a combobox: https://dev.to/rohanfaiyazkhan/how-to-make-an-accesible-auto-suggest-with-vanilla-javascript-4g27

briri commented 2 months ago

that's great @jupiter007. Finding an accessible solution was one of our biggest hurdles with the other typeahead in the tool

jupiter007 commented 1 month ago

I'm time-boxing this to 3-4 days to see if I can create a type-ahead that could possibly replace the one we have in the pilot.

jupiter007 commented 1 month ago

@magicalmary and @briri I created a sample typeahead React component in the dmptool that looks and behaves a bit more like a normal select using a combobox, so users will be forced to select one of the items in the dropdown. If they select "Other", then the "Other Repository", "Repository description", and "Repository url" fields will display. Otherwise, they are hidden by default until the user selects the "Other" option.

I've included a movie below, and I can share with you at the next stand up.

Let me know if this makes sense or not Mary.

https://github.com/CDLUC3/dmptool/assets/8452761/200359cb-77e0-4c21-ad1d-db5dfc8a8371

magicalmary commented 1 month ago

Sorry, but I cannot view the video above!

jupiter007 commented 1 month ago

Oh sorry about that @magicalmary. I can see it. Maybe there's some restriction? It's essentially what we went over in our morning meeting today though.

jupiter007 commented 1 month ago

Spoke to @magicalmary, and she said we should go forward with this new Typeahead/autosuggest and see what kind of feedback we get from pilot participants.

jupiter007 commented 1 month ago

Hi @briri I made an update to the Typeahead component and researchoutputs.js to handle saving the 'other' field value as the 'title'. I created this PR.

Once you approve it, I was hoping we could push this change up to Stage so that @magicalmary could test this new typeahead functionality out.

CDLUC3 / dmptool

Autoentry of URL for selected repository #580