Comments (10)
@bryan-foong Can you provide an example, or an animated GIF? I have no such problem when I run the examples locally with npm run start
.
from react-select-plus.
Ok I found out that this only happens on the Async list but not static list. Check the demo that is showing "Contributors (Async)" and "Github users (Async with fetch.js)", so does "Cities (Large Dataset)".
from react-select-plus.
Ok the latest patch seems to work now. Thanks @TrevorBurnham
from react-select-plus.
Guys, this bug is back on 1.0.0-rc.10.patch1, can we please re-open this issue?
from react-select-plus.
Check the demo that is showing "Contributors (Async)" and "Github users (Async with fetch.js)", so does "Cities (Large Dataset)".
@husek I'm only able to replicate at http://github.hubspot.com/react-select-plus/ with the Cities examples (the one that uses react-virtualized-select). The other examples seem to handle the arrow keys as expected:
Can you give me more details on the problems you're experiencing with those non-virtualized examples?
from react-select-plus.
hey @TrevorBurnham,
I'm not using any virtualization at all, actually, it's an async select separated by groups.
And yes you can't replicate at that link indeed, but it seems that this example is running 1.0.3-rc3.patch3.
I've tried to run the examples on localhost using the latest version (1.0.0-rc.10.patch1) and sure enough, I was able to replicate
from react-select-plus.
I'm still unable to replicate in the Contributors or Github users examples when running the latest master
locally.
I do notice that scrolling with the arrow keys doesn't work when two options have the same value
, e.g. the value "Albany" appears 3 times in the Cities dropdown so only the first Albany can receive focus (either with the mouse or the keyboard). If this is what you're running into, can you remove duplicate values from your options? React-Select-Plus implicitly assumes that values are unique.
from react-select-plus.
Thanks for the answer @TrevorBurnham, but I'm afraid this isn't the case.
Here's two gists for you:
https://gist.github.com/husek/f59b259cd0392bc0faeab7d7392339ad
https://gist.github.com/husek/3c2dea714ea3f2a1b14bb480765a2291
I cloned the master branch, removed pretty much everything from the /examples/src/app.js, leaving it like this:
import Example from './components/Example';
/* eslint react/prop-types: 0 */
import React from 'react';
import ReactDOM from 'react-dom';
import './example.less';
import Example from './components/Example';
ReactDOM.render(
<div>
<Example />
</div>,
document.getElementById('example')
);
and ta-da bug replicated!
from react-select-plus.
hey @TrevorBurnham, were you able to replicate that after my last post?
from react-select-plus.
@husek Your example has a bug: This line is a no-op, which means that react-select identifies each option by its value
. Since all options have the same value
(undefined
), the bug I mentioned in my previous comment applies. The fix for your case is to change that line to
valueKey="id"
from react-select-plus.
Related Issues (20)
- Possible to select groups? HOT 1
- Custom options for Group HOT 3
- Please update to react-select 1.2.0 HOT 2
- OptionGroup throws errors when setting dragging property
- Async multi-select sometimes hides the menu incorrectly after selecting a value HOT 1
- Option Groups are not searchable
- Remove Selected not working
- Force drop-down menu to open HOT 8
- Non-clearable Selects can be cleared (with backspace) HOT 1
- Cannot select menu items on mobile
- Huge problem with infinite loop options into group. HOT 1
- Remove Selected Disables Options
- Search input clears on selection
- Not work with react-datepicker HOT 1
- delete key is not affecting input text
- No supports for react 16+ HOT 4
- possible to trigger onChange event from outside of component ??
- TypeError: Cannot read property 'string' of undefined HOT 3
- If I use the cdn links to import react-select-plus, Then how to use CreatableSelect? Its not working by importing.
- Trying to get in touch regarding a security issue 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-select-plus.