Skip to content

Commit

Permalink
fix for issues JedWatson#1020 and JedWatson#2102
Browse files Browse the repository at this point in the history
* fix for issues JedWatson#1020 and JedWatson#2102

* updated test to fix test for input focus as componentDidUpdate would set the focus to input if the menu is open

* added tests for fix JedWatson#1020 and JedWatson#2102
  • Loading branch information
sushant-at-nitor authored Dec 5, 2017
1 parent 75f3043 commit 791ca1d
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 2 deletions.
17 changes: 16 additions & 1 deletion src/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,12 @@ class Select extends React.Component {
const handler = this.state.isOpen ? this.props.onOpen : this.props.onClose;
handler && handler();
}

// let the input have focus as current code does not close menu on clicking outside on the body
// with focus user can perform all the actions and get more control over closing the menu
if(this.state.isOpen){
this.focus();
}
}

componentWillUnmount () {
Expand Down Expand Up @@ -350,7 +356,16 @@ class Select extends React.Component {
}

if (this.props.onBlur) {
this.props.onBlur(event);
// allow onBlur to decide to close the menu or keep it open
// this will allow tether users to take control of closing the menu on their conditions
// this fix is useful when consumer is using tether and avoiding closing menu if you drag the scroll bar in IE
const allowBlur = this.props.onBlur(event);

// explicit check for false value to avoid break in code
if(allowBlur === false){
this.focus();
return;
}
}
var onBlurredState = {
isFocused: false,
Expand Down
3 changes: 2 additions & 1 deletion test/Async-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,8 @@ describe('Async', () => {
});

it('focuses the search input', () => {
expect(filterInputNode, 'not to equal', document.activeElement);
// test would fail as `componentDidUpdate` will set focus if the menu is open
//expect(filterInputNode, 'not to equal', document.activeElement);
asyncInstance.focus();
expect(filterInputNode, 'to equal', document.activeElement);
});
Expand Down
30 changes: 30 additions & 0 deletions test/Select-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3172,6 +3172,36 @@ describe('Select', () => {
});
});

describe('option onBlur returns non false value', () => {
it('menu should be closed', () => {
instance = createControl({
options: defaultOptions,
onBlur: (e) => {
return true;
}
});

clickArrowToOpen();
instance.handleInputBlur();
expect( instance.state.isOpen, 'to be false');
});
});

describe('option onBlur returns false', () => {
it('menu must remain open', () => {
instance = createControl({
options: defaultOptions,
onBlur: (e) => {
return false;
}
});

clickArrowToOpen();
instance.handleInputBlur();
expect( instance.state.isOpen, 'to be true');
});
});

describe('onFocus', () => {

var onFocus;
Expand Down

0 comments on commit 791ca1d

Please sign in to comment.