Hint is shown when menu is not visible

[alasdairhurst]

Version 2.2.0

Steps to reproduce

Start typing to get a hint

press esc to hide the menu

Expected Behavior

hint is hidden when the menu is hidden

Actual Behavior

hint is always visible when the input is focused

[ericgio]

Yeah, I guess that's a little weird, though not the end of the world. The right behavior is probably to blur the input when the user hits esc. What do you think?

[alasdairhurst]

Personally, I wouldn't expect the input to blur unless the user manually navigates away. In this case they're trying to dismiss the menu so IMO it should just act like any other text input when the options menu is not showing. Esc would just focus the user on the text field. (basically, reset to the state it would be in when the user first clicks on the input.)

I think this should work pretty similar to a bootstrap multiselect. When you press esc to dismiss the options it keeps focus but hides the menu. - This is actually the current functionality, which is fine. The issue/expected behaviour is that rather than the hint text showing while the input is focused, it should only show while the menu is visible.

A workaround i'm currently using isn't ideal, but it is to blur, then focus straight after, but obviously, It's firing off all these extra events that it shouldn't do if it was implemented natively.

[alasdairhurst]

I'm using this example quite a bit - it has my workarounds/fixes in it.

https://jsfiddle.net/alasdairhurst/mgwLfodx/2/
I go through a bit more effort than it would take to implement this in the main component, but it comes down to using a class to hide the hint when the input is "inactive" (i.e. no menu is showing). You have a bit more control over it internally since you hide it when no hints are available so rather than showing it always when focused, just change that to when the menu is visible.

[ericgio]

The issue/expected behaviour is that rather than the hint text showing while the input is focused, it should only show while the menu is visible.

Why do you feel that's the case?

[alasdairhurst]

From what I see, the point of the hint text should be to show what will be input once the typeahead autocomplete functionality is activated.

I think we would both agree this is meaningless when the input has no focus since it doesn't reflect the current state of the input.

The menu is shown when suggestons are available. The hint text would mirror the best match by default and the current selection if the user highlights something else in the menu.

When the menu isn't shown, no suggestions are being shown. Since there's no autocomplete to activate while the menu is closed, the hint text doesn't really mean anything and gets in the way of the input value.

Maybe a bad example but this is the idea:

For example, we have a form with a username typeahead input.
This is a new user and the username is unknown
The user selects the username input and starts typing a username
The user sees hints for similar usernames after they start typing.
In this example there is a user called "foobar" and this user wants "foo"
They type in foo, which is valid, but they will always be pushed/hinted with "foobar" whenever the field is selected. They will even see the menu appear every time that input is selected. Since the user has finished with their input, they don't want to be pestered by additional hints assuming they mean something else every time they select the input.

With my suggested approach, the user would only start seeing suggestions for "foobar" again once they start typing something new into the input box.
Let's say they don't want "foo" anymore and want "foob" instead. They select the input, start typing "b" and the hints appear. then they don't want any more hints so they press esc to hide the menu.
Since the hint text is always displayed on focus, they would still see "foobar" hinted even though they dismissed the suggestions.

Now, with the "default" behaviour of always showing the menu on focus, the functionality wouldn't really change.
User clicks on the input
Suggestions show
hint shows active suggestion

Then you have the option of a deferred menu
user clicks on input - nothing happens
user types
suggestions show
hint shows active suggestion

TLDR: if the menu isn't showing, there aren't active suggestions so it doesn't seem right to keep suggesting in the hint text but not the menu.

Probably repeated myself quite a bit, but hopefully you get the idea.

[ericgio]

Sounds reasonable, thanks for elaborating.

[ericgio]

Fixed in v2.3.2