ui:Added dropdown for mnemonic phrase input

[amitx13]

Fixes: #831

Added recommended word suggestions to the mnemonic phrase input field. The feature aims to improve the usability and accuracy of the mnemonic input process

To Test: Navigate to Create new wallet or Import existing wallet.

[amitx13]

• after entering word 12, the word suggestion is stuck

Hey @MarnixCroes, thanks for pointing that out—I appreciate your feedback. I will take a look into it.

• one nice addition might be to have enter keystroke select the suggestion when there is only one suggestion

Sure, great suggestion! It would definitely be a nice addition.

• at recovery selecting the suggestion will not automatically navigate the entry point to the next entry, while it does this at wallet creation?

Yes, I'm not sure, but I think it's because, at the time of wallet creation, JAM knows the mnemonic, but at the time of import, it doesn't. However, I will take a look and try to add this feature.

[theborakompanioni]

tACK 994f6ed nice work

Second that! tACK https://github.com/joinmarket-webui/jam/commit/994f6ed3c8375e517cbf3f8ecaaaca60fde5f6ae. So nice. :rocket:

Tests would be a nice to have.. :wink:

[theborakompanioni]

• one nice addition might be to have enter keystroke select the suggestion when there is only one suggestion

Sure, great suggestion! It would definitely be a nice addition.

One additional thing that can be done is a follow-up PR is, that the dropdown is not focused when "tab" is hit, when the full word has been written by the user. Currently, you have to press "tab" twice to go to the next input element, ideally, only one button press is need in such situations! (Dropdown should still be displayed so the user can see that it is part of the wordlist! It should just not focus and immediately jump to the next input element). What do you think?

[amitx13]

One additional thing that can be done is a follow-up PR is, that the dropdown is not focused when "tab" is hit, when the full word has been written by the user. Currently, you have to press "tab" twice to go to the next input element, ideally, only one button press is need in such situations! (Dropdown should still be displayed so the user can see that it is part of the wordlist! It should just not focus and immediately jump to the next input element). What do you think?

The dropdown remains visible but no longer gets focused when 'tab' is pressed after typing a full word. Now, pressing 'tab' moves directly to the next input element in these cases.

[amitx13]

eb040fc

at recovery when you write the full entry, the suggestion keeps being displayed. Even after the cursor entry is onto the next field. It goes away when you start typing. Not a big issue but a bit odd

Yes, if you use Tab after writing a full word, it will show the dropdown so the user can see that it is part of the wordlist and navigate to the next input field. Imho this is the right behaviour becz the purpose of Tab key is to navigate between focusable elements on a page, not for selecting option within a dropdown

edit: this is the same as #835 (comment) afaict

Am I understanding this correctly, @theborakompanioni ? Or is there something I’m missing?

[theborakompanioni]

eb040fc at recovery when you write the full entry, the suggestion keeps being displayed. Even after the cursor entry is onto the next field. It goes away when you start typing. Not a big issue but a bit odd

Yes, if you use Tab after writing a full word, it will show the dropdown so the user can see that it is part of the wordlist and navigate to the next input field. Imho this is the right behaviour becz the purpose of Tab key is to navigate between focusable elements on a page, not for selecting option within a dropdown

edit: this is the same as #835 (comment) afaict

Am I understanding this correctly, @theborakompanioni ? Or is there something I’m missing?

No, I think @MarnixCroes has a point here. It is good that tab jumps to the next input, but the dropdown should disappear. A user is already aware of that it is part of the worldlist if it is the only one displayed before tab is pressed. Makes sense? Another thing: If there are multiple words to select, I need to press tab twice to select the first word. Can that be fixed?

Edit: Also, tests would be nice for this. e.g. what happens if a user inputs "a" (multiple words), "aban" (only one word) or "abandon" (completely written out - only one word left) and then test the tab and tab + enter behaviour.

[amitx13]

No, I think @MarnixCroes has a point here. It is good that tab jumps to the next input, but the dropdown should disappear. A user is already aware of that it is part of the worldlist if it is the only one displayed before tab is pressed. Makes sense?

yes

Another thing: If there are multiple words to select, I need to press tab twice to select the first word. Can that be fixed?

current behaviour: input (ja) -> dropdown appears -> pressed Tab once -> pressed Enter I'm really sorry, I'm not getting this in one go. Could you please confirm, @theborakompanioni and @MarnixCroes, if this is not the behavior you both want?

Screencast from 11-09-24 04:29:41 PM IST.webm

Edit: Also, tests would be nice for this. e.g. what happens if a user inputs "a" (multiple words), "aban" (only one word) or "abandon" (completely written out - only one word left) and then test the tab and tab + enter behaviour.

Got it, but this can be done in a follow-up PR. As we discussed earlier, JAM is going to release a new version soon, so this would be a good addition. But if you need it now, I'm on it.

[theborakompanioni]

No, I think @MarnixCroes has a point here. It is good that tab jumps to the next input, but the dropdown should disappear. A user is already aware of that it is part of the worldlist if it is the only one displayed before tab is pressed. Makes sense?

yes

Another thing: If there are multiple words to select, I need to press tab twice to select the first word. Can that be fixed?

current behaviour: input (ja) -> dropdown appears -> pressed Tab once -> pressed Enter I'm really sorry, I'm not getting this in one go. Could you please confirm, @theborakompanioni and @MarnixCroes, if this is not the behavior you both want?

Hmm.. it works in Chromium but works differently in Firefox. Here the dropdown itself is in focus after the first tab.

But it is not a deal-breaker and can be looked at in a follow-up PR.

Edit: Also, tests would be nice for this. e.g. what happens if a user inputs "a" (multiple words), "aban" (only one word) or "abandon" (completely written out - only one word left) and then test the tab and tab + enter behaviour.

Got it, but this can be done in a follow-up PR. As we discussed earlier, JAM is going to release a new version soon, so this would be a good addition. But if you need it now, I'm on it.

Yeeah, that is what most of the time rarely happens when it comes to tests in a follow-up PR :wink: Ideally, you'll write them before or as you develop the feature. Afterwards is quite hard as you have not written the code with tests in mind. But I am always open for surprises : -)

[MarnixCroes]

Merge as is and open an issue for the follow ups?

[theborakompanioni]

Merge as is and open an issue for the follow ups?

Okay with that. :raised_hands:

[theborakompanioni]

@MarnixCroes @amitx13 Needs rebasing and some small fixes. I am preparing a patch.