colonyDapp icon indicating copy to clipboard operation
colonyDapp copied to clipboard

Refactor: SingleUserPicker in Control Safe dialog

Open jakubcolony opened this issue 3 years ago • 2 comments

Description

This PR improves the user experience of SingleUserPicker used in Target contract address field in the Control Safe Dialog by addressing the following issues raised in #3865:

When clicking on the target contract address input field without someone writing anything, the message “it looks like I couldn’t find what you are looking for” pops up. The expectation is that there wouldn’t be any dropdown message until the user had a chance to write or paste something into the input.

If you paste the target contract address into the input field but you don’t actually select the address from the given drop down option but instead move to the ABI/JSON field and start typing or try to paste something, you will notice immediately after you can't do any other actions. The expectation would be the user won't need to select the address only from the drop down options, the user should be able to paste any contract address.

There's a new prop in SingleUserPicker controlling whether the currently entered value should be set on blur (by default it's only set after clicking an item)

When you do actually select the target contract address from the drop down, the address appears in red, which could confuse the user into thinking there is an error.

https://user-images.githubusercontent.com/112586815/192036354-1c4cb1f7-440c-40ed-80be-d76b18102990.mov

Changes 🏗

  • New props in SingleUserPicker: renderEmpty and setValueOnBlur
  • Tweaks in ContractInteractionSection

Resolves #3865

jakubcolony avatar Sep 23 '22 18:09 jakubcolony

As discussed on this PR. The work done here can be used in the future when the refactoring of the SingleUserPicker resumes.

Apply the changes in this PR to the core component itself so that every instance of the picker is not only consistent but has improved UX.

Julianahlk avatar Oct 03 '22 14:10 Julianahlk

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.

:white_check_mark: ArmandoGraterol
:white_check_mark: jakubcolony
:x: willm30
You have signed the CLA already but the status is still pending? Let us recheck it.

CLAassistant avatar Jan 25 '24 19:01 CLAassistant