Show warning when search text is too short

[csillag]

[github-actions]

Deployed to Cloudflare Pages

Latest commit:	3902a194ac33ab6638bffdf0b77f244e1599f6ee
Status:	✅ Deploy successful!
Preview URL:	https://25d397eb.oasis-explorer.pages.dev

[csillag]

I would suggest this for the 'too little characters' notification: https://www.figma.com/file/ifCrok8cP5ymEYjMa2PIi9/Block-Explorer?type=design&node-id=6624%3A246974&mode=design&t=Gk19GONKNbhNZF6X-1

OOps, I didn't see that.

[donouwens]

I really like the concept you've got now. If we can add the colours and icon we should be there.

[csillag]

I have updated the screenshort after making it more similar to the visuals.

[donouwens]

Could we outline the input field with a red stroke as well, please?

[csillag]

Could we outline the input field with a red stroke as well, please?

Like this?

[donouwens]

Could we outline the input field with a red stroke as well, please?

Like this?

Yeah exactly, although the stroke feels thicker than in the visuals. I assume it's the 3px active stroke, but maybe we could try the inactive 1px if it's not too much work?

[csillag]

the stroke feels thicker than in the visuals. I assume it's the 3px active stroke, but maybe we could try the inactive 1px if it's not too much work?

I just triggered the built-in "error" flag on the input field, anything beyond that was automatic. Will have to dig deeper... 🧤

[donouwens]

the stroke feels thicker than in the visuals. I assume it's the 3px active stroke, but maybe we could try the inactive 1px if it's not too much work?

I just triggered the built-in "error" flag on the input field, anything beyond that was automatic. Will have to dig deeper... 🧤

Ideally I'd say the error would be less thick, but I understand if that's not within the scope of this task.

[lukaw3d]

I don't like that it is so hard to get to search suggestions

[csillag]

I don't like that it is so hard to get to search suggestions

Please elaborate

[lukaw3d]

If user doesn't know what to search for, they shouldn't need to make up 3 chars

[lukaw3d]

also, hold on, why are we not allowing searching for block "10" :/

[csillag]

also, hold on, why are we not allowing searching for block "10" :/

That we can fix easily.

[csillag]

I don't like that it is so hard to get to search suggestions. If user doesn't know what to search for, they shouldn't need to make up 3 chars

Fair point. Here is some potential solutions, and the drawbacks I see

Option	Problem
0. (Current behavior) for short search string, the default suggestions are obscured.	If user doesn't know what to search for, they shouldn't need to make up 3 chars just to get the search suggestion.
1. Leave the default suggestions in place, don't show the "too short" message, just disable the search	It won't be obvious why the search button is disabled.
2. Leave the default suggestions in place, don't show the "too short" message, enable the search and execute it normally. (Since the search term is too short, we won't search for tokens.)	The users might never figure out why they can't find their "XYZ" token when they search for "XY".
3. Leave the default suggestions in place, don't show the "too short" message, enable the search, but instead of executing it, show a separate error message (at a different location, not obscuring the search suggestion) upon searching. Something like this: (This was my previous implementation)	Visually might not be that pleasant (?)
4. Introduce a second line of search suggestions. One line would always be the default suggestions, and the other line would be the "too short" message, when applicable. Something like this:	???
X Something else I didn't think of

@donouwens @lukaw3d please state your preferences.

[csillag]

I have now implemented option 4. It can be tested here.

[csillag]

the stroke feels thicker than in the visuals. I assume it's the 3px active stroke, but maybe we could try the inactive 1px. [...] Ideally I'd say the error would be less thick, but I understand if that's not within the scope of this task.

OK @donouwens , but what do you mean exactly?

A) Shall I reduce the 3px active stroke at the outline of input fields to 1px everywhere?
B) Shall I reduce the 3px active stroke at the outline of input fields in case of errors to 1px everywhere?
C) Shall I reduce the 3px active stroke at the outline, in case of errors, just this once, at this field?

[csillag]

the stroke feels thicker than in the visuals. I assume it's the 3px active stroke, but maybe we could try the inactive 1px. [...] Ideally I'd say the error would be less thick, but I understand if that's not within the scope of this task.

OK @donouwens , but what do you mean exactly?

A) Shall I reduce the 3px active stroke at the outline of input fields to 1px everywhere?
B) Shall I reduce the 3px active stroke at the outline of input fields in case of errors to 1px everywhere?
C) Shall I reduce the 3px active stroke at the outline, in case of errors, just this once, at this field?

Until further notice, I have done option B)

[lukaw3d]

Option 5: show suggestions on focus, show "min 3 chars" when anything is entered
(that would require quite some refactoring of search using ClickAwayListener, so separate PR?)

[csillag]

Sorry @donouwens we want to move on, so we will just merge this now. We can always update the styling if required.

[donouwens]

@csillag I think in essence this works okay, but visually it needs updating - could we show it like this: https://www.figma.com/file/ifCrok8cP5ymEYjMa2PIi9/Block-Explorer?type=design&node-id=6624%3A246974&mode=design&t=NgiFzpta47LLPkRx-1

Moreover, would it be possible to only start showing the 'too short...' notification after the user doesn't enter an additional character after the first one within 500ms? I'm hoping that gives the user time to enter a second and third character without having to see the error.

Finally, would it be possible to smooth out the status between showing the 'too short..' and regular state? I would like animations like this - you can access the flow from the video here.

I want this to be smooth as it will be part of the very first impression users will have of the product.

[donouwens]

OK @donouwens , but what do you mean exactly?

A) Shall I reduce the 3px active stroke at the outline of input fields to 1px everywhere? B) Shall I reduce the 3px active stroke at the outline of input fields in case of errors to 1px everywhere? C) Shall I reduce the 3px active stroke at the outline, in case of errors, just this once, at this field?

Could we make it behave like this and this - so an inline stroke everywhere of 3px and not have a stroke on the search button itself, please.

[csillag]

visually it needs updating - could we show it like this:

Sorry could you please help me by detecting and enumerating the points of difference?

Design	Implementation

[donouwens]

visually it needs updating - could we show it like this:

Sorry could you please help me by detecting and enumerating the points of difference?

Design Implementation

Of course;

1. Stroke is inside and 3px thick - no stroke on CTA button (not sure if there is one though)
2. Additional spacing (5px) between input field, error ("Please enter..") and helper text )"Not sure what..")
3. No background color for error text ("Please enter...")
4. Added clear search icon (different task though, right)?
5. Missing period after "Token" in helper text ("Not sure what...")

[csillag]

See follow up in #689