Carbon: Make it possible to change theme on arrow keypresses

[tibuurcio]

Hi guys, thank you all for this awesome project! 👌🏼👏🏼
_I've not used the issue template since this is a feature request_

First thing I tried to do on the web page was to change the theme on arrow keys to see how they look, similar to how VSCode does it. I noticed it wasn't possible and then tried to implement it. I have a somewhat working solution by now!

I would like to know if you guys think it's a good idea so that I can than create a PR to work better on it!

I have yet to figure out how to make the dropdown also scroll (maybe keep a ref to it and use scrollTop ? 🤔). Also, I'm not very familiar with Next.js... Is it ok to add and eventHandler to the window object directly?

Thank you all again! Haven't had the opportunity to use it but will definitely do it.

[jakedex]

This is a great idea, @tibuurcio! I think it'd be great to have for both the theme and language dropdowns.

As for making the dropdown scroll, you might want to look into scrollIntoView. Since we're using react, you'll just listen for the keydown event inside of the dropdown component (something like this).

Looking forward to your PR!

[mfix22]

Hey guys,
I think we should use downshift to handle this. It handles key(down|up) out of the box and makes it super easy to implement type-ahead (something we might want to do for this in the future as well).

[tibuurcio]

@jakedex Thanks for the suggestion about scrollIntoView, will take a look into it!

@mfix22 Downshift is such a great idea for this! I've never used it but I'm familiar with the render props concept behind it. Great opportunity to learn, will try to hack something with it when I have some time.

[imbrn]

How is the progress on this issue? Are you @tibuurcio or someone else hacking this? If not, I can try this. I've read a little about the downshift library and I think I can get this up and running with that in a few days.