not able use keydown in dropdown

[ramHruday]

key down to travel down dropdown not working

[guiyep]

Hello ramHruday,

This is a known issue, I had to disable the feature because of JedWatson/react-select#3656.

Once that is fixed in react-select 3.0.4 I will put it back.

Thanks!
Guiyep

[SaraKoncz]

Hello Guiyep,

Many thanks for the library, we love it and our UI improved a lot since we implemented it.

However, the lack of arrow selection in the menu is really troubling us.

Since it is actually working, only the highlight is missing - I thought it could be possible to solve with a workaround?

I checked the same implementation using react-select and didn't experience the issue mentioned in JedWatson/react-select#3656 so I'm quite optimistic that it could be solved soon, but your input on the issue would be really helpful.

Looking forward to hear from you and many thank in advance!
Sara

[guiyep]

Hello Sara,

The problem in the react-select library is still present here is an example:

https://codesandbox.io/s/react-codesandboxer-example-mbhn2

You can see that after you select an option, the second time you open the drop down the focused element is restarted to the beginning of the list. This is a big problem since it should follow from the last selected element.

That is the problem, so when you key down after you selected something you loos the visibility of the selected item if you are not in the first part of the scroll. This was not happening in 2.4.4.

So I had to disable the functionality until they fix the problem.

I posted a question in their bug to see if they have any updates.

Thanks
Guillermo

[guiyep]

Remember that is is not a custom component but just an extension of the react-select. So I use all the functionality they expose.

[SaraKoncz]

Hello Guillermo,

I saw your comment at the original issue, many thanks for urging it!

Sara

[SaraKoncz]

Hello Guillermo,

I checked again the original issue in react-select but not much happening so far.
Also looked into it a bit more and would like to kindly ask if you could go over my request again, to enable the highlight feature in your code.

The reason why I think it would be a better case, than the current "solution":

• even though the highlight is not visible the function still works, therefore the users still can use (and for example our users still use, since they've got used to it) the arrows for selection when they fill an empty dropdown for the first time. They just get annoyed, that the highlight is not visible and sometimes they select the wrong item. ( I understand the original issue, that when they open a dropdown where an item is already selected, the highlighting will be at the top instead of the selected item but believe that it is less annoying than not having the highlight at all)

• as you said this problem is related to react-select and not your code so in my opinion the extension you provide should work similar to the extended component.

We love using react-select-virtualized, it is a great help for us and if possible we would like to continue using it, but I'm afraid without this feature we have to look for workarounds.

Many thanks in advance,
Sara

[guiyep]

Let me think about it. I may be able to re-enable the feature under an unsafe flag. Will keep you posted.

[SaraKoncz]

Thank you!:)

[guiyep]

@SaraKoncz I review this today but I feel that for adding this workaround, the impacts in the library codebase are too broad. I have to spread this prop around and once it is in, it is very complex to remove it :(. People may start using it and I will be in charge of maintaining it. I feel that it is not the purpose of the library since it is a react-select issue and this is just an improvement of their library.

I think the best solution will be to fork the library and remove the commented code that states this:

// wait for https://github.com/JedWatson/react-select/issues/3656
 // the problem is that the always start now from the beginning and not from the last selected. so
 // the arrow functionality is lost between closing and opening again.

I can provide help if needed.

I'm really sorry. I hope you can understand.
Guiyep

[SaraKoncz]

Hi Guiyep,

No problem! Many thanks for considering it, though! :)

[drpiou]

Hey!

I'm sorry, but you cannot close all the issues concerning this, we are excepting it to work some day.

When navigating with the arrows keys up and down, I don't understand why we should go from the last position when obviously when I press the first time the arrow I should either start from the top or the bottom. I personally agree with the new behaviour of react-select 3.x.x.

This said, the functionality is still active, I can navigate with arrow keys, but the focused class is not activated, so we are now in a middle of something that is not visible but active, which is very unpleasant.

When you say you deactivate this functionality, I either intend a functionality completely off, or a functionality which is working and visible, but right now I have something the user can navigate in the list but absolutely nothing to display as a faded background for the value for example. This is very frustrating because I'm coming from react-virtualized-select, and I must say that discovering this after updating to your repo is a but frustrating.

What is your solution?

[guiyep]

Hello @drpiou

Sorry for your frustration.

Unfortunately, there is no solution for this right now since this uses react-select as a peer dependency and not as a dependency. People that use this library are expecting to have all the latest features (all that are possible) of react-select and we can only accomplish this using it as a peer dependency and unfortunately, that means that we inherit their bugs also.

This library needs JedWatson/react-select#3656 to work. Otherwise, there is no other way I can keep the functionality in sync If I implement it custom. They don't have an API for implementing that functionality in accordance with their component.

I'm also frustrated since their bug has been open for a long time, but the only thing we can do is keep pushing for them to fix it.

I can reopen this bug, but that is not going to fix the issue. It is completely in their end and until they fix it I cannot do anything.

I'm open to sugestions or PRs.

Thanks,
Guiyep.

[themre]

this is the issue regarding highlighting selected items in the list? when i hit key down, there are no active styles attached to the option item. this is also related to this bug in react-select?

[guiyep]

Yes it is.

[guiyep]

Finally, it is working again :) react-select has fixed the issue and I put back my code.