Semantic-ui-react: Dropdown: Invalid activeIndex after item selection in search Dropdown

[kourosz]

Steps to Reproduce

1. Set the dropdown with search and enough items (e.g. 50 items) to make it scrollable.
2. Type in something in order to get one of the bottom items.
3. Use arrow-down/up to move between filtered items.
4. Press Enter.
   (
   Or
5. choose an item from end of the list by mouse click
   )

Expected
The Dropdown should select the item in the text box and selected item becomes active item.

Result
The Dropdown does not do this. Instead the search text stays as it was. If you clear the text from the search box, then the selected item will not be the active item. This is not the same behaviour as the original Semantic-UI with JQuery. Users are annoyed by this.

Testcase
https://codepen.io/kourosz/pen/LOQJBE

This is very critical for us as we are migrating from Semantic-UI/jQuery to React in a very important project.

[layershifter]

I can't reproduce this.

Please add more detailed description for steps, i.e. what I need to type in search. And if possible add GIFs with correct and incorrect behaviour.

[kourosz]

Please go to https://codepen.io/kourosz/pen/LOQJBE

This is based on one of the examples in your web site. Please follow the
following steps:

1. In the search box type in: No
   you will see this:

[image: Inline image 1]

1. Select NorthDakota, you will see this:
   [image: Inline image 2]

2. Now click on the search box, you will see:
   [image: Inline image 3]

I expect to see NorthDakota in the search box, and also in the list.
Instead, the Arizona is presented as Selected.

Repeat the same steps, but this time with NorthCarolina. Then you will see
Alaska is selected.

I have the same problem with my data, and found that whatever you select
from the filtered list, that index will be used to mark the item as
selected within the whole set. In our example, the NorthDakota has the
index of 34. When you select it by filter, the index# 2 (because
NorthDakota is the 3rd item) is taken and used for setting the selected
item, but it actually should be 34.

Hope this is clear for you.

Thanks and regards,
Kouros

On Sat, Nov 25, 2017 at 6:28 PM, Alexander Fedyashov <
[email protected]> wrote:

I can't reproduce this.

Please add more detailed description for steps, i.e. what I need to type
in search. And if possible add GIFs with correct and incorrect behaviour.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Semantic-Org/Semantic-UI-React/issues/2336#issuecomment-346924275,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AU9fR2R-xgGiaRxWWrHMp_XU9xQbfAdmks5s58GPgaJpZM4QlBC5
.

[layershifter]

Confirmed bug, thanks. Screenshots are broken, but it's enough to understand problem.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[brodybits]

What is the actual status of this one?

[brianespinosa]

@brodybits if you take a look above your comment, there is an open PR referencing this issue. #2375

I just went to look at it and it is attempting to resolve this issue. More info can be seen there.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[namikklapic]

I am having the same problem. Is there any progress?

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[MarianSulgan]

Same issue here. What is the current standing?

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[layershifter]

Was fixed in [email protected] by #3584.

• 0.87.1 https://codesandbox.io/s/currying-river-j7b6f?file=/example.js
• 0.87.2 https://codesandbox.io/s/damp-pond-cdv5l