mapbox / mapbox/mapbox-gl-geocoder

Geocoder input hijacks focus when used in form

Open
#402 5 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted
Dominant language
JavaScript
Stars
388
Forks
181
PR merge metrics
No merged PRs in 30d

Description

### Overview

When using the geocoder outside of a map, as part of a form, pressing the `Enter` key in another field will bring the focus of the form to the geocoder input. This is unexpected behavior which prevents users from submitting forms via `Enter` and breaks the overall flow of filling out a form.

### Library Version

- [v4.7.0](https://github.com/mapbox/mapbox-gl-geocoder/tree/9d084c95d07f2f5db7f86a77c2b395472c1a0805)

### Reproducible Example

- Visit https://codepen.io/zoran/pen/RwRXxKj
- Click into any of the non-geocoder fields
- Press the `Enter` key

### Expected Behavior

- The `Enter` button should behave as it normally would in a form (i.e. submitting form when appropriate).

### Current Behavior

- The form changes focus to the geocoder input.

### Notes

- This issue doesn't seem to happen when the geocoder input is placed after the submit button, e.g.:

```html


```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodePen reproduction and trace how the geocoder input handles Enter and focus when placed inside a form. Done means pressing Enter in another field follows normal form behavior, including submission when appropriate, without moving focus to the geocoder input.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.