Web: status updates input form autocomplete should be able to be keyed up and down with my keyboard

[owocki]

User Story

as a user, i want status updates input form autocompletes to be keyed up and down with my keyboard, so i dont have to use my dumb mouse.

Why Is this Needed

Summary:

Description

Type:
Feature

Current Behavior

Status update form, enter @ then a username and an auto complete appeears. You CANNOT nav it with your keyboard.

Expected Behavior

Status update form, enter @ then a username and an auto complete appeears. You CAN go up and down it with your arrow keys and select a user with 'enter'.

Definition of Done

see above

Data Requirements

Additional Information

dont submit a broken PR. test your PR. and pls only work on this if u can do it in next week.

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 0.4 ETH (80.95 USD @ $202.39/ETH) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $72,983.62 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 1 month from now.
Please review their action plans below:

1) walidmujahid has been approved to start work.

Looking at the issue, my initial plan would be to refactor the markup to use an unordered list, then I would just handle key events 40 and 38 when the focus is on the textarea-dropdown.

Learn more on the Gitcoin Issue Details page.

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

Sorry, I will try to publish a WIP PR soon.

[walidmujahid]

@owocki Sorry for taking so long on this. I am making a point to get this done soon. Some changes to my initial work plan after look at things could be summed up as basically refactoring 58826bd62678ba1cd19007c2755b09243c5e2389

The main issue is that currently the dropdown is a div with link elements standing in for options. Initially, this did not make much sense to me, so when I saw your issue, I thought of unordered lists and list items as the more semantic choice and then handling the relevant key events.

However, select/option elements might be the better choice. When I realised that, I remembered that the codebase already heavily uses the select2 plugin in multiple places, so I am ust going go with select/option elements and use the select2 plugin. I plan on updating the returned JSON from the views slightly/add a new search endpoint and deprecate the url query if nessecary so as to best use select2's remote data features.

[walidmujahid]

Nevermind my Select2 idea. I will use jQueryUI's autocomplete instead.

[owocki]

thx for the update

‪On Tue, Mar 17, 2020 at 11:09 PM ‫Walid Mujahid وليد مجاهد‬‎ <
[email protected]> wrote:‬

Nevermind my Select2 idea. I will use jQueryUI's autocomplete instead.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gitcoinco/web/issues/6191#issuecomment-600427493, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAD5PCOGOASAFJRGAHP4IBDRIBJQJANCNFSM4LEVHGKQ
.

--

@owocki http://www.twitter.com/owocki

---

gitcoin is live and has generated over $3.5mm for Open Source Software - see
our results https://gitcoin.co/results

[walidmujahid]

Late initial demo video - 2020-03-19: https://youtu.be/UwHUZ0ndk30

Uses jQeryUI Autocomplete

I need to:

• fix styling and add user avatars to the listed items
• fix key events so pressing ENTER does not post the status update

[owocki]

looks promising .... CCing @octavioamu bc of the jquery UI dependency tho

‪On Thu, Mar 19, 2020 at 7:15 AM ‫Walid Mujahid وليد مجاهد‬‎ <
[email protected]> wrote:‬

Late initial demo video - 2020-03-19: https://youtu.be/UwHUZ0ndk30

Uses jQeryUI Autocomplete

I need to:

• fix styling and add user avatars to the listed items
• fix key events so pressing ENTER does not post the status update

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gitcoinco/web/issues/6191#issuecomment-601171035, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAD5PCKYAHWLIXBT2PLAQWTRIILHFANCNFSM4LEVHGKQ
.

--

@owocki http://www.twitter.com/owocki

---

gitcoin is live and has generated over $3.5mm for Open Source Software - see
our results https://gitcoin.co/results

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

Yes, I am still working on this @gitcoinbot

[walidmujahid]

@octavioamu Has let me know, https://github.com/gitcoinco/web/pull/6232#issuecomment-602998392, that attempts are being made to remove jQueryUI from the codebase. I will update soon with ann alternative solution.

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

A plugin or library would have handled all the nessecary keys out of the box, but since I am long off schedule for this, I will just hack in the up down arrows. I am not quite sure why the bootstrap classes will not work this properly. I am not sure if it is because of how the menu is generated or if it is the the event listened for on input for the textarea. I did try the data-toggles and setting the roles.

Possibly a quick solution is to listen for the arrows within the #textarea itself and automatically change the values in the textarea based on the keys so as to avoid having to hit ENTER or click on the dropdown result.

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

Yes @gitcoinbot

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

Yes @gitcoinbot

Sorry everyone for the delay on this. I know it should have been ready weeks ago.

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

Yes

[gitcoinbot]

@walidmujahid Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] reminder (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[walidmujahid]

Yes @gitcoinbot

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

__The funding of 0.4 ETH (244.9 USD @ $612.25/ETH) attached to this issue has been cancelled by the bounty submitter__

• Questions? Checkout Gitcoin Help or the Gitcoin Chat
• $965,339.48 more funded OSS Work available on the Gitcoin Issue Explorer