Bug with the first selection in a scrolled dropdown

[che730]

trafficstars

Bug Report

Steps

1. Enter the screen that contains the dropdown UI.
2. Click the dropdown selection box to open the dropdown list.
3. Click an item in the list that is not the first item.
4. onClick is called twice, resulting in the first item's value being selected instead of the chosen item.

Expected Result

On the first click, onClick should be called only once.

Actual Result

On the first click, onClick is called twice. The first call uses the actual selected value, but the second call uses the value of the first item, overwriting the selected value.

Version

2.1.4

• Browser version
  • Chrome 127.0.6533.100 (arm64)

Testcase

https://codesandbox.io/p/sandbox/semantic-ui-react-forked-99gtvy

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[dominikdosoudil]

Happens to me as well

SUIR: 3.0.0-beta.2 Chrome 126.0.6478.183 (Official Build) (arm64) (Safari seems ok)

Dropdown usage

      <Dropdown
        selection
        search
        deburr
        options={R.sort(options, localeCompareBy('text', i18n.locale))}
        onChange={handleChange}
        value={value}
        placeholder={i18n._(msg`...`)}
        labeled
        allowAdditions
        onAddItem={handleAddition}
        clearable
      />

As we tested the bug on different platforms, it seems that it works again on macOS with Chrome 127. However Windows with Chrome 127 still does not work. It's really weird however it seems that it's browser bug and it seems that it will get fixed soon as it started working again on the mentioned macOS + Chrome127

[ElixirMike]

This just started happening to me as well, when I got the latest version of Chrome: Version 127.0.6533.100 (Official Build) (64-bit)

I have submitted a bug to Chrome support, so I'm hoping they have a fix. ..but any other suggestions would be great. This is affecting my entire app, where I have a LOT of dropdowns

[joseloTala]

hey there! same happened to me as well, did anyone hear back from chrome?

[ElixirMike]

Nothing yet....

[sandeep7410]

chrome://flags/#keyboard-focusable-scrollers disabling this chrome flag will work for now

https://issues.chromium.org/issues/356399847#comment22 as per this google chrome issue

At this point, we are looking at option 2: Dropdown fix by the web developer maintaining the app. Disabling the feature works for now, but the Origin Trial will expire after some time and will not be maintained forever. I would recommend looking at your code with your team to see what kind of logic you have in place. Some potential suggestions:

• If it doesn't need to be a scroller, change it to not be one
• Audit your focus, blur or mousedown event listeners. Likely you have added listeners for many elements when it should be for a specific case (hence it is getting fired unnecessarily on the scroller). Please let us know if you need help debugging and/or if your team would like to extend the Origin Trial (currently it is expected to expire in about 6 months).

[ElixirMike]

This worked for my computer, but that doesn't help our users with the issue and we're not going to ask them to manually change this. It looks like semantic will need to publish a fix for this?

[rickyhuang824]

I am having the exact same issue after updated chrome

[smm90]

Any plan for a fix for this?

[nathanhannig]

chiming in, also having issue with this now

[danielbady]

I ran into this problem as well. My solution for now is to set selectOnBlur={false} to the Dropdown component. Hopefully there will be a better one in the future.

[ElixirMike]

Thx for sharing that...that at least is a work-around for now

[misiyevich]

Have the same issue from recently.

[ryanewtaylor]

Experiencing the issue here as well.

[dominikdosoudil]

Is actually selectOnBlur={true} something that anyone wants? It seems to me pretty uncomfortable tbh. I just set it to false everywhere in our app and I am even more happy with it than before.

If there was a discussion about it, I would vote to flip the default behaviour or even remove the functionality.

[misiyevich]

Is actually selectOnBlur={true} something that anyone wants? It seems to me pretty uncomfortable tbh. I just set it to false everywhere in our app and I am even more happy with it than before.

If there was a discussion about it, I would vote to flip the default behaviour or even remove the functionality.

For example i need selectOnBlur={true} with onBlur handler for my functionality. In searchable multiple dropdown.

[dominikdosoudil]

For example i need selectOnBlur={true} with onBlur handler for my functionality. In searchable multiple dropdown.

I think that onBlur should be still triggered even if selectOnBlur is disabled. From my perspective, selectOnBlur just configures Dropdown to fire change event on blur. However onBlur should just pass the blur event to parent. These things shall not be bound together IMO.

[misiyevich]

I think that onBlur should be still triggered even if selectOnBlur is disabled. From my perspective, selectOnBlur just configures Dropdown to fire change event on blur. However onBlur should just pass the blur event to parent. These things shall not be bound together IMO.

Sounds good, but setting selectOnBlur={false} while onBlur prop isn't undefined doesn't solve the issue.

[a-sotiroglou]

This fixes the issue for me temporarily, while also using onBlur.

I ran into this problem as well. My solution for now is to set selectOnBlur={false} to the Dropdown component. Hopefully there will be a better one in the future.

Reading about on the keyboard-focusable-scrollers, I replicated the issue and it only happens when enough options exist to make the dropdown scrollable.

chrome://flags/#keyboard-focusable-scrollers disabling this chrome flag will work for now

https://issues.chromium.org/issues/356399847#comment22 as per this google chrome issue

At this point, we are looking at option 2: Dropdown fix by the web developer maintaining the app. Disabling the feature works for now, but the Origin Trial will expire after some time and will not be maintained forever. I would recommend looking at your code with your team to see what kind of logic you have in place. Some potential suggestions:

• If it doesn't need to be a scroller, change it to not be one
• Audit your focus, blur or mousedown event listeners. Likely you have added listeners for many elements when it should be for a specific case (hence it is getting fired unnecessarily on the scroller). Please let us know if you need help debugging and/or if your team would like to extend the Origin Trial (currently it is expected to expire in about 6 months).

[altpanda]

This appears to be fixed in the latest Chrome update (version 128.0.6613.85).

[misiyevich]

This appears to be fixed in the latest Chrome update (version 128.0.6613.85).

Yes! New version of Chrome fixes the issue.