Skip to content

Improve timezone option labels for better keyboard filtering #151

@Atharv-Bandekar

Description

@Atharv-Bandekar

Describe the bug

Currently, timezone options are prefixed with "(UTC …)", which prevents effective
keyboard-based filtering because all options start with the same characters.

This affects users who rely on keyboard navigation or type-to-select behavior
in select components.

Example (current):
(UTC +05:30) India
(UTC +01:00) Germany

Suggested improvement:
India (UTC +05:30)
Germany (UTC +01:00)

This change improves accessibility and keyboard navigation without affecting
the underlying timezone values.

I am happy to submit a PR if this approach is acceptable.

Reproduction

Steps to reproduce: 1. Use the TimezoneSelect component from this library. 2. Open the timezone dropdown. 3. Focus the select input and start typing a location name (e.g., "I" for India or "G" for Germany). 4. Observe that type-to-select does not work as expected because all options begin with "(UTC …)". Expected behavior: Typing the first letter of a location should jump to the corresponding timezone. Actual behavior: Typing any letter does not meaningfully filter or jump because all labels share the same "(UTC …)" prefix.

System Info

OS: Any
Browser: Any
Node.js: Any
Affected version: All current versions of react-timezone-select

This issue is independent of environment and reproducible across systems,
as it relates to option label formatting.

Used Package Manager

npm

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions