Comments (7)
CMTegner
commented on September 28, 2024
2
Reproducible in IE11 on Windows 8.1:
- Navigate to https://reactcommunity.org/react-autocomplete/async-data/
- Type 'A' in the input
- Observe that the 'Alabama' is highlighted in the autocomplete menu
- Type 'L' in the input
- Observe that the input value is 'LA', expected: 'AL'
I'm not sure what causes this, but if no one else has time I'll try to have a look this weekend.
from react-autocomplete.
HenriJ
commented on September 28, 2024
Hi @CMTegner . Did you have any luck finding the root cause ? We are stuck because of this problem too, and can have a look also if it can help.
from react-autocomplete.
CMTegner
commented on September 28, 2024
I've had little look at the problem. My initial suspicion was that input#setSelectionRange() (which is invoked when Autocomplete fills the input with the top result) was bugging out in IE, and that's sort of what's happening. To exclude the possibility of setSelectionRange() being completely borked on IE I made a quick test page:
<!doctype html>
<html>
<head>
<title>setSelectionRange test</title>
</head>
<body>
<input type="text" value="foobar">
<script type="text/javascript">
var input = document.querySelector('input');
input.focus();
input.setSelectionRange(1, 6);
</script>
</body>
</html>Load that up in IE11, type a character, success.
After having played around with setSelectionRange for a while, I came to the conclusion that if you create a range with a non-zero length, the caret (or at least the internal caret state position) is moved to position 0 (the start of the input). In other words, if you use setSelectionRange to place the caret (end = start) after updating the input value, things work as expected. The problem occurs when you create an actual text selection range (end > start).
My current theory is that Autocomplete's usage of setSelectionRange() is somehow interfering with React's focus/caret positioning logic. I haven't had time to dig any deeper.
from react-autocomplete.
HenriJ
commented on September 28, 2024
Not sure exactly why it behaves like that (as you say, it might be interferences between React and setSelectionRange), but I found a workaround that seems to fix the issue : forcing the position of the caret in the callback of the setState() that was causing the problem.
@CMTegner @shiitake Could you confirm that HenriJ@3d5a3e8 fixes the issue for you ?
from react-autocomplete.
CMTegner
commented on September 28, 2024
@HenriJ I don't even want to know what made you try that... I swear I tried just about everything yesterday in an attempt to find a workaround. Even after having tested your workaround for a couple of hours I still don't 100% understand why it works. The closest I've come to explain it is this:
That's Chrome (on Mac) and IE11 side by side. You can see that the setState() callback in handleKeyDown() reports the correct caret/selection state in Chrome, but IE reports it as (0,0). Ignore the non-deterministic autocomplete suggestions, I eventually reduced the list in lib/utils.js to exclude that as a possibility.
Anyway, huge thanks! I made a PR which I need @sprjr to look at ASAP, since this is a blocker for IE usage.
from react-autocomplete.
whichsteveyp
commented on September 28, 2024
Sorry again for the delays here. This has been in 1.0.0-rc2, which I've tagged and published to npm. Unfortunately I'm headed to China for most of the rest of the month. We should probably chat with @ryanflorence about adding more contributors to the project if something more pressing comes up. There's a backlog of issues and PRs open that I'd like to try and work through as well, to keep the component moving and up to date.
Hopefully this release unblocks folks!
from react-autocomplete.
CMTegner
commented on September 28, 2024
@sprjr no worries, I'm happy just seeing some movement at all :)
from react-autocomplete.
Related Issues (20)
- iOS Safari: Menu does not open again after selection of an option HOT 1
- Cannot select via click if rendered item is an imported Component. HOT 7
- Sometimes the dropdown does not close
- missing label for input field
- Any way to programatically close the menu /lose focus on the input with the mouse in the menu?
- Render methods should be a pure function of props and state. HOT 2
- Limit items show in the menu HOT 2
- Add throttle to prevent lag
- getItemValue() vs renderItem() HOT 2
- blur() is not triggered when the dropdown is scrolled in phone
- id passed to the inputProps breaks the dropdown
- the AutoComplete was poped out, I can't update the value, and it gives me an error. What a big mess! HOT 2
- how to select the search list item ? HOT 2
- how to create multi level drop down
- how to set required validation to autocomplete when used in form
- Incorrect import in examples
- How to disable options if already selected HOT 2
- changing the font in the input box?
- Give options to replace input with any other element
- Is this repo alive? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-autocomplete.