Skip to content

Commit

Permalink
Problems maintaing focus onclick
Browse files Browse the repository at this point in the history
  • Loading branch information
Torgeir Pedersen Cook committed Feb 20, 2017
1 parent 28cb216 commit eb04450
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 93 deletions.
122 changes: 31 additions & 91 deletions src/selectors/base-selector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ class BaseSelector extends React.Component {
this.onInputKeyDown = this.onInputKeyDown.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onBlur.bind(this);
this.globalClickHandler = this.globalClickHandler.bind(this);
this.onInputBlur = this.onInputBlur.bind(this);
this.onInputFocus = this.onInputFocus.bind(this);
this.onChangeFocusedSuggestion = this.onChangeFocusedSuggestion.bind(this);
this.filterSuggestions = this.filterSuggestions.bind(this);

Expand All @@ -32,78 +29,25 @@ class BaseSelector extends React.Component {
}

onInputChange(input) {
const {onChange} = this.props;
this.showHideSuggestions(true);
onChange(input);
this.props.onChange(input);
}

globalClickHandler(evt) {
if (!this.self.contains(evt.target)) {
const {shouldSelectFocusedSuggestionOnTab, suggestions} = this.props;
const {highlightedSuggestionIndex} = this.state;
if (shouldSelectFocusedSuggestionOnTab) {
const selectedAccount = suggestions[highlightedSuggestionIndex];
if (selectedAccount) {
this.onSuggestionSelect(selectedAccount);
}
}
}
}

addGlobalEventListeners() {
window.addEventListener('mousedown', this.globalClickHandler);
}

removeGlobalEventListeners() {
window.removeEventListener('mousedown', this.globalClickHandler);
}

onChangeFocusedSuggestion(index) {
onChangeFocusedSuggestion(index) { //TODO focus
this.setState({highlightedSuggestionIndex: index});
}

onFocus() {
this.setState({
showSuggestions: true
}, () => {
this.props.onFocus();
this.addGlobalEventListeners();
});
}

onBlur() {
//Calling setState causes a rerender which removes SuggestionList from the DOM.
//onSelect is thus never called when a SuggestionItem is clicked.
this.state = {...this.state, showSuggestions: false};
this.props.onBlur();
this.removeGlobalEventListeners();
}

hasFocus() {
const {inputHasFocus, highlightedSuggestionIndex} = this.state;
return inputHasFocus || highlightedSuggestionIndex !== -1;
}

onInputFocus(event) {
event.stopPropagation();
if (!this.hasFocus()) {
this.onFocus();
}
this.state = {...this.state, inputHasFocus: true};
this.setState({showSuggestions: true}, this.props.onFocus
);
}

onInputBlur(event) {
onBlur(event) {
event.stopPropagation();
setTimeout(()=> {
if (!this.hasFocus()) {
this.onBlur();
}
});
this.state = {...this.state, inputHasFocus: false};
this.setState({showSuggestions: false}, this.props.onBlur);
}

showHideSuggestions(show, cb = ()=> {
}) {
showHideSuggestions(show, cb = ()=> {}) {
const nextState = show ? {showSuggestions: show} : {showSuggestions: false, highlightedSuggestionIndex: -1};
this.setState(nextState, cb);
}
Expand All @@ -113,15 +57,16 @@ class BaseSelector extends React.Component {
onSelect(suggestion);
if (shouldSetFocusToInputOnSelect) {
this.setState({
inputHasFocus: true,
showSuggestions: false,
highlightedSuggestionIndex: -1
}, ()=> this.input.focus());
});
}
}

onSuggestionSelect(suggestion) {
const {shouldHideSuggestionsOnSelect} = this.props;
onSuggestionSelect(event, suggestion) {
event.stopPropagation();
const {shouldHideSuggestionsOnSelect, shouldSetFocusToInputOnSelect} = this.props;

if (shouldHideSuggestionsOnSelect) {
this.showHideSuggestions(false, ()=> this.onSelect(suggestion));
return;
Expand All @@ -131,10 +76,7 @@ class BaseSelector extends React.Component {
}

onInputReset() {
if(this.state.showSuggestions){
this.setState({showSuggestions : false});
return;
}
this.setState({showSuggestions : false});
this.props.onReset();
}

Expand Down Expand Up @@ -175,8 +117,9 @@ class BaseSelector extends React.Component {
}

onInputKeyDown(event) {
const {showSuggestions} = this.state;
const {which, altKey} = event;
const {showSuggestions, highlightedSuggestionIndex} = this.state;
const {suggestions, shouldSelectFocusedSuggestionOnTab} = this.props;
const {which, altKey, shiftKey} = event;
switch (which) {
case KeyCodes.DOWN :
if (altKey && !showSuggestions) {
Expand Down Expand Up @@ -209,21 +152,19 @@ class BaseSelector extends React.Component {
event.preventDefault();
}
break;
// case KeyCodes.ENTER:
// onSelect(suggestions[highlightedIndex]);
// break;
// case KeyCodes.TAB:
// if (evt.shiftKey) {
// evt.preventDefault();
// onSelect(suggestions[highlightedIndex]);
// break;
// }
// if (shouldSelectFocusedSuggestionOnTab) {
// onSelect(suggestions[highlightedIndex]);
// break;
// }
// onBlur();

case KeyCodes.ENTER:
this.onSelect(suggestions[highlightedSuggestionIndex]);
break;
case KeyCodes.TAB:
if (shiftKey) {
event.preventDefault();
this.onSelect(suggestions[highlightedSuggestionIndex]);
break;
}
if (shouldSelectFocusedSuggestionOnTab) {
this.onSelect(suggestions[highlightedSuggestionIndex]);
break;
}
}
}

Expand Down Expand Up @@ -259,8 +200,8 @@ class BaseSelector extends React.Component {
isSuggestionsShowing={showSuggestions}
id={id}
placeholder={placeholder}
onBlur={this.onInputBlur}
onFocus={this.onInputFocus}
onBlur={this.onBlur}
onFocus={this.onFocus}
/>
{showSuggestions &&
<SuggestionsList
Expand All @@ -275,7 +216,6 @@ class BaseSelector extends React.Component {
renderNoMatches={renderNoMatches}
onSelect={this.onSuggestionSelect}
onClose={()=> this.showHideSuggestions(false)}
onBlur={this.onBlur}
shouldSelectFocusedSuggestionOnTab={shouldSelectFocusedSuggestionOnTab}
/>}
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/suggestion/suggestion-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ class SuggestionItem extends Component{
}
}}
role='option'
onClick={(e) => onSelect(item)}
onMouseDown={(event) => {event.stopPropagation();onSelect(event, item)}}
onMouseUp={(event)=>{event.stopPropagation()}}
onClick={()=> console.log("hei")}
className={isHighlighted ? 'account-suggestion__highlighted account-suggestion' : 'account-suggestion'}
tabIndex={-1}
>
Expand Down
3 changes: 2 additions & 1 deletion src/suggestion/suggestion-list-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ class SuggestionListContainer extends React.Component {
constructor(props) {
super(props);
this.refHighlightedSuggestion = this.refHighlightedSuggestion.bind(this);

}

refHighlightedSuggestion(suggestionEl) {
Expand Down Expand Up @@ -40,6 +41,7 @@ class SuggestionListContainer extends React.Component {
return (
<div className='container-suggestion'
onKeyDown={this.onKeyDown}
ref={(self)=> {if(self){ self.addEventListener(['mousedown', 'mouseup'], (e)=> e.stopPropagation())} }}
>
<Scrollbars
autoHeight={true}
Expand All @@ -62,7 +64,6 @@ SuggestionListContainer.propTypes = {
onSelect: PropTypes.func.isRequired,
onChangeFocused: PropTypes.func.isRequired,
highlightedIndex: PropTypes.number.isRequired,
onBlur: PropTypes.func.isRequired,
onClose: PropTypes.func,
heightMax: PropTypes.number,
shouldSelectFocusedSuggestionOnTab: PropTypes.bool,
Expand Down

0 comments on commit eb04450

Please sign in to comment.