Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Geocoder input does not get focus upon opening #182

Open
mvl22 opened this issue Oct 27, 2024 · 4 comments
Open

Geocoder input does not get focus upon opening #182

mvl22 opened this issue Oct 27, 2024 · 4 comments

Comments

@mvl22
Copy link

mvl22 commented Oct 27, 2024

Currently, when the widget is added to the map, and the user hovers over the search button, the input field is uncollapsed, but the user has to give focus manually by clicking in the input field. This seems unnecessary, given that the user intention will almost always be to want to start typing.

It would therefore be useful to have a focus/autofocus option to add autofocus.

For now, the following workaround will do this:

// Add auto-focus to the widget
document.querySelector ('.maplibregl-ctrl-geocoder').addEventListener ('mouseenter', function () {
	document.querySelector ('.maplibregl-ctrl-geocoder--input').focus ();
});
@HarelM
Copy link
Collaborator

HarelM commented Oct 27, 2024

Thanks for taking the time to open this issue!
To be honest, I have never interacted with an input that "stills" the focus when you hover it.
Moreover, if you accidentally hover over it the map will stop responding to hover, which is not a great UX.
This basically "saves" a single click with a mouse your already interact with and is in the right place.
Can you showcase a similar behavior in a well known site?
I find this behavior a bit odd to be honest...

@mvl22
Copy link
Author

mvl22 commented Oct 27, 2024

To be honest, I have never interacted with an input that "stills" the focus when you hover it.
Can you showcase a similar behavior in a well known site?

I think the problem is that the collapse mode is quite unusual - most UIs, e.g. Google Maps, have an always-visible control. As a result there is no ambiguity in that scenario.

Here, the user is actually interacting by hovering on the icon, and so it feels odd to have then to select a second time, this time with a click. On the other hand, I accept your point that an accidental hover then leaves the box upon. To me the lack of autofocus feels more problematic.

This basically "saves" a single click with a mouse your already interact with and is in the right place.

At the very least, if the user has actually clicked on the search icon, that is a clear indication of search - at present they still then have to click on the search input.

@HarelM
Copy link
Collaborator

HarelM commented Oct 28, 2024

Can you link to a video or a place to better explain the issue, I might not fully understand the problem...
Sorry, I've been maintaining this plugin only for a short while...

@mvl22
Copy link
Author

mvl22 commented Oct 29, 2024

Reproduce case:

  • Go to this Codepen example I found: https://codepen.io/tsamaya/pen/KKxGwLj
  • In the Javascript, add collapsed: true to the example given, in the new MaplibreGeocoder options parameter
  • The map will load below, with the control collapsed by default
  • Hover over the control
  • The input box opens, but does not have focus.

It seems unnecessary for the user to have to then click - the act of hovering over the control is more likely than not to indicate that they want to do a search.

My suggestion would be an autofocus parameter, perhaps defaulting to false if you feel there is too high a possibility of an accidental opening. Either way, it is a reasonable requirement to get focus upon explicitly opening a control.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants