From eb04450464b5b9652bebc97eda51184431f104e1 Mon Sep 17 00:00:00 2001 From: Torgeir Pedersen Cook Date: Mon, 20 Feb 2017 13:22:24 +0100 Subject: [PATCH] Problems maintaing focus onclick --- src/selectors/base-selector.js | 122 +++++--------------- src/suggestion/suggestion-item.js | 4 +- src/suggestion/suggestion-list-container.js | 3 +- 3 files changed, 36 insertions(+), 93 deletions(-) diff --git a/src/selectors/base-selector.js b/src/selectors/base-selector.js index a63daeffc0..f1531ec4e7 100644 --- a/src/selectors/base-selector.js +++ b/src/selectors/base-selector.js @@ -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); @@ -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); } @@ -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; @@ -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(); } @@ -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) { @@ -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; + } } } @@ -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 && this.showHideSuggestions(false)} - onBlur={this.onBlur} shouldSelectFocusedSuggestionOnTab={shouldSelectFocusedSuggestionOnTab} />} diff --git a/src/suggestion/suggestion-item.js b/src/suggestion/suggestion-item.js index 1ba1fa4703..6fb21dd089 100644 --- a/src/suggestion/suggestion-item.js +++ b/src/suggestion/suggestion-item.js @@ -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} > diff --git a/src/suggestion/suggestion-list-container.js b/src/suggestion/suggestion-list-container.js index f4da05f906..322f2d36ff 100644 --- a/src/suggestion/suggestion-list-container.js +++ b/src/suggestion/suggestion-list-container.js @@ -7,6 +7,7 @@ class SuggestionListContainer extends React.Component { constructor(props) { super(props); this.refHighlightedSuggestion = this.refHighlightedSuggestion.bind(this); + } refHighlightedSuggestion(suggestionEl) { @@ -40,6 +41,7 @@ class SuggestionListContainer extends React.Component { return (
{if(self){ self.addEventListener(['mousedown', 'mouseup'], (e)=> e.stopPropagation())} }} >