Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select - no longer update value while navigating dropdown #2029

Merged
merged 47 commits into from
May 7, 2024

Conversation

atmgrifter00
Copy link
Contributor

@atmgrifter00 atmgrifter00 commented Apr 22, 2024

Pull Request

🤨 Rationale

While in the midst of implementing the clear select feature, I recognized that the fact that we were updating the value while navigating the dropdown was both confusing (since we don't update the display value) and resulting in an awkward implementation for the feature.

👩‍💻 Implementation

While we no longer want to update selectedIndex (and as a corollary to this, value) while a user navigates the dropdown, we still want the appropriate option in the dropdown to appear selected/highlighted. The styling was keying off of the state of the aria-selected attribute, which was being updated when the selected state of an option changed. Now, as the selected state is no longer changing, I've created a new attribute for the ListOption, activeOption, that the CSS for the Select leverages to manage the styling of the options.

To set the new attribute at the appropriate times required providing overrides to the various select<>Option (Next, Previous, First, Last) methods. In order to accomplish this we have to keep some additional internal state for what the current active index is (the index for which option should currently be highlighted).

It was also discovered during the implementation of this fix that there was an issue stemming from the typeahead feature that allows a user to select an option (when there is no filter, or when the dropdown is closed) by typing characters while the Select has keyboard focus. This required forking some FAST Listbox implementations to prohibit updates to the selectedIndex while the dropdown was open.

Additionally, since I was already updating related implementation, I was able to tackle this issue as well (where tabbing away from the Select could end up with unexpected display).

🧪 Testing

Largely this just required updates to tests that used to expect the selectedIndex/value to change while the dropdown was open and a user performed a navigation within the dropdown. Beyond that I provided new tests for the <Tab> behaviors, new tests to verify the typeahead behaviors, and a slight update to the pageObject for reporting what the selected option is (based on whether or not it's open). This last point could be subject for debate.

✅ Checklist

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@atmgrifter00 atmgrifter00 changed the title Select no value update refactor Select - no longer update value while navigating dropdown Apr 22, 2024
@atmgrifter00
Copy link
Contributor Author

@mollykreis would you mind buddying this?

@atmgrifter00 atmgrifter00 marked this pull request as ready for review April 30, 2024 20:12
Copy link
Member

@rajsite rajsite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't finish reviewing today, expect to Monday

packages/nimble-components/src/select/styles.ts Outdated Show resolved Hide resolved
@atmgrifter00 atmgrifter00 enabled auto-merge (squash) May 7, 2024 15:36
@atmgrifter00 atmgrifter00 merged commit bbe2654 into main May 7, 2024
13 checks passed
@atmgrifter00 atmgrifter00 deleted the select-no-value-update-refactor branch May 7, 2024 16:09
@jattasNI jattasNI mentioned this pull request May 7, 2024
1 task
rajsite pushed a commit that referenced this pull request May 7, 2024
# Pull Request

## 🤨 Rationale

In #2029 I broke the hover styling for non-selected options. This fixes
it.

## 👩‍💻 Implementation

Tiny CSS change.

## 🧪 Testing

Manual. As this is hover-based, a matrix test didn't seem possible.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tabbing away from filterable select can cause value to change when it opens a second time
4 participants