search

fluid-lab / gamepad-navigator

GSoC 2020 project
Other
6 stars 10 forks source link

Current select handling mangles the UI and doesn't allow editing. #125

Closed duhrer closed 5 months ago

duhrer commented 7 months ago

We have special handling for select inputs that opens them by calculating their size and resizing them. This worked previously to allow opening a select, but does not seem to work any longer. I'm not sure it ever really allowed proper navigation either.

Regardless, with the code in progress for the upcoming 1.0 release, it's not possible to navigate through or to choose select box options. This is a blocker for #103 and the 1.0 release, as we cannot add bindings or configure "send key" bindings until this is fixed.

The changes we make to the select element's size are also not undone when we leave the element, which results in mangling the select inputs as we operate them.

To address this, we should add a modal similar to the one we use for text inputs, which allows the user to navigate through the list of options. We should:

  1. On clicking a select element, derive a set of choices from the <option> tags in the select.
  2. Present a navigable list of the choices in a modal with a "Cancel" and "Save" button.
  3. Close the modal without selecting a choice when the "Cancel" button is clicked.
  4. For single-choice menus, when a choice is selected, move focus to the "Save" button automatically.
  5. Enable the "Save" button when one (or more) choices is selected.
  6. On "Save", close the modal and change the value of the original select (as we do with text inputs).

Notably, this approach will not help with select boxes in our own modals, as we have no mechanism to transition between modals. For now we will have to avoid using select boxes in modals, but this seems acceptable.

duhrer commented 7 months ago

The list of choices should support both "tab" navigation and "arrow" navigation with both a keyboard and with the gamepad navigator actions that simulate "tab" and "arrow" navigation.

duhrer commented 7 months ago

When building the list of choices, we should display but not allow the user to select disabled options. We should also not display options with the hidden attribute.

duhrer commented 7 months ago

I'm half wondering if we should try to simulate a click on the selected option, in case there are event handlers on the option.

I also think we should set up a select with a change handler and confirm whether setting the select's value is adequate, or whether we need to trigger the select element's change event ourselves.

duhrer commented 6 months ago

I came up with a working solution that can operate our settings panel, and a range of select inputs, including multiple select boxes.