Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] Scroll resets when searching in Korean #45417

Open
azurealstn opened this issue Feb 26, 2025 · 4 comments
Open

[Autocomplete] Scroll resets when searching in Korean #45417

azurealstn opened this issue Feb 26, 2025 · 4 comments
Assignees
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@azurealstn
Copy link

azurealstn commented Feb 26, 2025

Steps to reproduce

Steps:

  1. https://azurealstn.github.io/autocomplete

Hello,
I'd like to report a bug I found in Material UI's Autocomplete component.
Test it here: https://azurealstn.github.io/autocomplete
Source code: https://github.com/azurealstn/autocomplete
Issue:
The variable top100Films used in the options property contains English labels, which is fine. However, when searching with Korean text ('스') and using the mouse wheel to scroll, then clicking an item, the scroll position resets.
[Detailed explanation]

Enter '스' in the input and scroll down
When pressing (but not releasing) the mouse on the ComboBox, the scroll resets
When releasing the mouse, the item is selected from the reset scroll position

Is there any way to solve this issue?

  • OS: Window
  • Browser: Chrome

Image

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: scroll, autocomplete

@azurealstn azurealstn added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 26, 2025
@mj12albert
Copy link
Member

Interesting 👀

@azurealstn Korean uses IME input like Japanese/Chinese right? It may not be related to this issue, but in your gif you're just pasting in the characters?

@mj12albert mj12albert added bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 26, 2025
@mj12albert mj12albert changed the title Bug: Scroll resets when searching in Korean [Autocomplete] Scroll resets when searching in Korean Feb 26, 2025
@mj12albert mj12albert self-assigned this Feb 26, 2025
@mj12albert
Copy link
Member

mj12albert commented Feb 26, 2025

@azurealstn As far as I can see, when is in the textbox, the popup immediately shows no results even though it seems like there should be some matches?

🤔 My first thought is that it could be the default filtering logic here doesn't handle Korean characters well and needs to be customized: https://mui.com/material-ui/react-autocomplete/#custom-filter

@azurealstn
Copy link
Author

@azurealstn As far as I can see, when is in the textbox, the popup immediately shows no results even though it seems like there should be some matches?

🤔 My first thought is that it could be the default filtering logic here doesn't handle Korean characters well and needs to be customized: https://mui.com/material-ui/react-autocomplete/#custom-filter

====
it's an IME input!
When copying and pasting text to select an item, the scroll doesn't reset.
However, when typing directly from the keyboard, the scroll resets.
As you mentioned, I'll try using the Custom filter option."

@azurealstn
Copy link
Author

It seems the issue is related to IME input. Filter options don't seem to be working well either. Do you have any other approaches we could try?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

2 participants