Prop to disable active index change on up / down keys

[learningdesignlabs]

Perusing the existing issues, I can see that active index is meant to be internal.

However, I believe there's a use case for being able to set it as a prop: when the options are sequential (as in a list of available times to choose from), and if we want behavior similar to how Google calendar events work, where adjacent options should still be displayed, we'd want to have the current option highlighted and selectable from pressing Enter:

Sample select behavior for sequential choices

Additionally, if we want the option of pressing up/down and moving from our current time to a new one, at the moment, even a custom menu and menu item render won't allow this behavior, because the current UP / DOWN behavior is part of the source code and always starts from the very first item of the list.

As I understand, if I could pass a function that specifies the active index, then I could base the active index off of the current selected value. Or, perhaps there is a way to expose the "_handleActiveIndexChange" function?

[learningdesignlabs]

So, looks like I was able to make due simply by disabling the up / down behavior and handling those key events on my own. However, I had to modify the source, to disable the default up / down behavior. It also seems that no other area of code was affected...

May I request just a simple disabling of this option, based on a 'enableDefaultUpDownSelection'={true | false} prop?

switch (e.keyCode) {
          case UP:
          case DOWN:
            // Prevent input cursor from going to the beginning when pressing up.
            e.preventDefault();

            // I JUST HAD TO COMMENT OUT THIS ONE LINE AND COULD GET THINGS TO WORK JUST FINE:
            //
            //_this._handleActiveIndexChange(getUpdatedActiveIndex(_this.state.activeIndex, e.keyCode, _this.items));

[ericgio]

Hi @learningdesignlabs, thanks for opening this issue! It sounds like the behavior you'd like is for the activeIndex to default to the selected item (if it exists), similar to a standard select component, is that right?

[learningdesignlabs]

Hi Ericgio, thanks so much for the response, I would say allowing activeIndex to default to the selected item would be a great feature, but in this use case there is some additional custom behavior beyond the current item being selected..

For example, in Google calendar if the value is 2:43pm, it will scroll the user down to 2:45pm, without highlighting it.. in which case, activeIndex isn't set, but the scroll position has changed.

In short, from my point of view being allowed to completely control behavior on Up / Down (vs having the system modify activeIndex, and also running my custom code via the onKeyDown prop), by disabling that line of code I mentioned above, would really solve this use case without too much rework..