Merge 6c44183 into ffd2e65

visusnet · Sep 6, 2018 · 1c1514e · 1c1514e
2 parents ffd2e65 + 6c44183
commit 1c1514e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/Typeahead.jsx b/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}
                             />
@@ -669,7 +670,7 @@ export default class Typeahead extends PureComponent<Props, State> {
     renderClearButton(): Node {
         if (this.props.isClearable && !this.props.isDisabled && this.state.value) {
             return (
-                <button className="typeahead__clear" onClick={this._handleClearClick}/>
+                <button tabIndex={-1} className="typeahead__clear" onClick={this._handleClearClick}/>
             );
         }
     }

diff --git a/src/Typeahead.spec.jsx b/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');