List Item Steals Focus After Selection

[dawsonc623]

While running through potential use cases for a filtered list component I am working on, I found a strange bug. Rather than explain it, I figured showing it would be better:

https://codesandbox.io/s/32788k0p5q

Follow these steps:

1. Enter "little" into the text field.
2. Press tab, then use the down arrow to highlight "Three Little Code Bugs"
3. Press enter - everything should clear (this is intentional)
4. Try to enter "little code" into the text field.

You should find once you get "little c" entered "Nine Little Code Bugs" becomes focused, which is in the slot "Three Little Code Bugs" was when it was originally selected. This behaviour persists until the page is refreshed.

I have not dug into why this is happening yet, but once I get a little more time today or tomorrow I will dive into the code and see what I can find. I figured I would submit this in case someone already has an idea of what might be happening or gets to it before I do.

[moog16]

@dawsonc623 I think what is happening is the focusListItemAtIndex in the List component remains with the index 2 when it is hidden. You can see the focusListItemAtIndex property in the screenshot below:

In the MDC Web v1 update, we removed all these state properties on the List component, and are now using the MDC Web foundation. This shouldn't be an issue in the future release. I'll leave this open to revisit when we release that component. You can see it in the branch feat/mdcweb-typescript-update1.

[dawsonc623]

@moog16 Ah, alright. It is worth noting that in my example code I do try to circumvent the issue by setting selectedIndex to undefined, but that did not make a difference.

I am not sure if the foundation component handles this, but similar to the discussion on this Dialog issue having selectedIndex and handleSelect implies this component should behave as a controlled component. If that is the case, we should think about implementing that behaviour when working on this next.

[moog16]

I actually fixed this in the List PR #776. This should be released with the rest of the MDC Web v1 updates.

[moog16]

#776 and v0.12.0 was released. This should no longer be an issue.