Scrolling with arrow-keys is not working

[bryan-foong]

i have updated to 1.0.0-rc.3.patch5, have noticed that the scrolling key is not working but it works on the demo page of react-select-plus.

[TrevorBurnham]

@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.

[bryan-foong]

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)".

[bryan-foong]

Ok the latest patch seems to work now. Thanks @TrevorBurnham

[husek]

Guys, this bug is back on 1.0.0-rc.10.patch1, can we please re-open this issue?

[TrevorBurnham]

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?

[husek]

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

[TrevorBurnham]

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.

[husek]

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!

[husek]

hey @TrevorBurnham, were you able to replicate that after my last post?

[TrevorBurnham]

@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"