Merge pull request #49 from pixelos-cc/master

Fix for keyboard navigation in filtered lists

Author: visusnet

src/Typeahead.jsx

@@ -571,7 +571,7 @@ export default class Typeahead extends PureComponent<Props, State> {
             } else {
                 options.forEach((option, index) => rows.push({
                     option,
-                    index
+                    index: this._getAbsoluteIndex(option)
                 }));
             }
             return rows;
@@ -656,6 +656,7 @@ export default class Typeahead extends PureComponent<Props, State> {
                                 noRowsRenderer={this._noRowsRenderer}
                                 rowHeight={calculateRowHeight}
                                 rowRenderer={renderRow}
+                                tabIndex={null}
                                 scrollToAlignment="start"
                                 {...scrollToIndexProp}
                             />

src/Typeahead.spec.jsx

@@ -250,6 +250,33 @@ describe('Typeahead should', () => {
         expect(Boolean(value1Option.prop('data-highlighted'))).toEqual(true);
     });
 
+    it('highlight second option in a filtered list when no value is set and arrow down key is pressed twice', function () {
+        const wrapper = mount(<Typeahead fieldName="fieldName" options={options}/>);
+        wrapper.find('input').simulate('focus');
+        simulateKeys(wrapper.find('input'), 'spe');
+        wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
+        wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
+        const value1Option = wrapper.find('.typeahead__option[data-value="value4"]');
+        expect(Boolean(value1Option.prop('data-highlighted'))).toEqual(true);
+    });
+
+    it('highlight the right option in a filtered list when no value is set and arrow down key is pressed twice', function () {
+        const optionsForFilter = [
+            {label: 'nomatch', value: 'value1'},
+            {label: 'nomatch', value: 'value2'},
+            {label: 'match haus', value: 'value3'},
+            {label: 'nomatch', value: 'value4'},
+            {label: 'match haus 2', value: 'value5'}
+        ];
+        const wrapper = mount(<Typeahead fieldName="fieldName" options={optionsForFilter}/>);
+        wrapper.find('input').simulate('focus');
+        simulateKeys(wrapper.find('input'), 'haus');
+        wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
+        wrapper.find('input').simulate('keyDown', {keyCode: KEY_DOWN});
+        const value1Option = wrapper.find('.typeahead__option[data-value="value5"]');
+        expect(Boolean(value1Option.prop('data-highlighted'))).toEqual(true);
+    });
+
     it('highlight first option when no value is set and arrow up key is pressed', function () {
         const wrapper = mount(<Typeahead fieldName="fieldName" options={options}/>);
         wrapper.find('input').simulate('focus');