Skip to content

Allow keyboard navigation for complex inputs elements within the Record Selector #1888

@seancolsen

Description

@seancolsen

For boolean columns

  • When the input is focused but the dropdown menu is closed (e.g. when focusing via Tab):
    • Pressing Enter should open the dropdown (instead of choosing the selected record in the Record Selector).
  • When the dropdown menu is open:
    • Pressing Enter should choose the selected option within the dropdown (instead of choosing the selected option within the Record Selector).
    • Pressing Esc should close the dropdown menu (instead of closing the Record Selector).
    • Arrow keys should select different dropdown menu options (instead of selecting different Record Selector options).

For temporal columns

(I.e. Date, Date & Time, Time, Duration)

  • When I've entered a date into the input via the keyboard, pressing Enter or Esc should either do nothing or should close the date/time picker (instead of choosing the selected option within the Record Selector). Users might be tempted to press those keys to close the date picker, and we want to avoid unintentionally closing the Record Selector in that situation.

Implementation

  • Instead of adding event listeners on the input (as is currently done), I'd like to add capturing window event listeners when the dropdown or date picker UI opens and then remove those event listeners when the UI closes.

Similar tickets

Metadata

Metadata

Assignees

No one assigned

    Labels

    readyReady for implementationtype: enhancementwork: frontendRelated to frontend code in the mathesar_ui directory

    Projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions