search

openstreetmap / iD

🆔 The easy-to-use OpenStreetMap editor in JavaScript.
https://www.openstreetmap.org/edit?editor=id
ISC License
3.37k stars 1.21k forks source link

The combobox options are truncated when displayed near the edge of the viewport #10482

Open nathanadams-tomtom opened 1 month ago

nathanadams-tomtom commented 1 month ago

URL

https://www.openstreetmap.org/edit#map=19/42.361060/-71.061190

How to reproduce the issue?

Steps to replicate the issue:

  1. Locate a feature with tags or relations containing fields that have options (example: https://www.openstreetmap.org/edit#map=19/42.361060/-71.061190)
  2. Adjust the viewport if necessary so that a field with options is positioned at the bottom of the viewport
  3. Select the field

Screenshot(s) or anything else?

Selecting a combobox near the bottom of the viewport can cause the field's options to be truncated if there is not enough space relative to the options list height. While users can use up and down keys to select from the available options in these cases, clicking truncated options is not possible. This can lead to unnecessary scrolling and/or collapsing of sections to accommodate option list height to make selections with the pointer.

If there is not sufficient space beneath a field to display all options, the options list could be displayed above the field.

The issue is observed in Firefox version 130.0.1 and Chrome version 129.0.6668.60 on Windows 11.

Example of truncated tag options: OpenStreetMap_ComboboxOptionsTruncated

Which deployed environments do you see the issue in?

Released version at openstreetmap.org/edit

What version numbers does this issue effect?

2.30.2

Which browsers are you seeing this problem on?

Chrome, Firefox

Francesfall commented 1 month ago

Hi, I'm a CS student looking to contribute to open-source projects. I'd like to work on this issue, could you please assign it to me?