Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blur input on touch devices when clicking on the rest of the page. #170

Closed
wants to merge 4 commits into from
Closed

Blur input on touch devices when clicking on the rest of the page. #170

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8545c6
Blur input when clicking on the rest of the page on ios devices.
May 17, 2016
0abef90
Don't blur input on touch-drag, use onDocumentMouseUp and onDocumentT…
May 17, 2016
c91fd5a
Use `React.createClass` to avoid binding methods to `this` (I was get…
May 23, 2016
ff2a740
Revert back to ES6 classes
nkbt Jul 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 49 additions & 4 deletions src/Autosuggest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ function mapDispatchToProps(dispatch) {
};
}

function extractTouchCoordinates({ changedTouches }) {
return { x: changedTouches[0].pageX, y: changedTouches[0].pageY };
}

class Autosuggest extends Component {
static propTypes = {
suggestions: PropTypes.array.isRequired,
Expand Down Expand Up @@ -74,6 +78,19 @@ class Autosuggest extends Component {
super();

this.saveInput = this.saveInput.bind(this);
this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
this.onDocumentTouchEnd = this.onDocumentTouchEnd.bind(this);
this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);

this.justTouchedInput = false;
this.touchStart = null;
this.justClickedOnSuggestion = false;
}

componentDidMount() {
global.window.addEventListener('touchstart', this.onDocumentTouchStart, false);
global.window.addEventListener('touchend', this.onDocumentTouchEnd, false);
global.window.addEventListener('mouseup', this.onDocumentMouseUp, false);
}

componentWillReceiveProps(nextProps) {
Expand All @@ -89,6 +106,37 @@ class Autosuggest extends Component {
}
}

componentWillUnmount() {
global.window.removeEventListener('touchstart', this.onDocumentTouchStart, false);
global.window.removeEventListener('touchend', this.onDocumentTouchEnd, false);
global.window.removeEventListener('mouseup', this.onDocumentMouseUp, false);
}

onDocumentTouchStart(event) {
this.touchStart = this.touchStart || extractTouchCoordinates(event);
}

onDocumentTouchEnd(event) {
const { x, y } = extractTouchCoordinates(event);

if (this.props.isFocused && !this.justTouchedInput && !this.justClickedOnSuggestion &&
this.touchStart) {
const dx = Math.abs(x - this.touchStart.x);
const dy = Math.abs(y - this.touchStart.y);

if (dx < 20 && dy < 20) {
this.input.blur();
}
}
this.justTouchedInput = false;
this.touchStart = null;
setTimeout(() => this.justClickedOnSuggestion = false);
}

onDocumentMouseUp() {
setTimeout(() => this.justClickedOnSuggestion = false);
}

getSuggestion(sectionIndex, suggestionIndex) {
const { suggestions, multiSection, getSectionSuggestions } = this.props;

Expand Down Expand Up @@ -186,6 +234,7 @@ class Autosuggest extends Component {
const items = (isOpen ? suggestions : []);
const autowhateverInputProps = {
...inputProps,
onTouchStart: () => this.justTouchedInput = true,
onFocus: event => {
if (!this.justClickedOnSuggestion) {
inputFocused(shouldRenderSuggestions(value));
Expand Down Expand Up @@ -306,10 +355,6 @@ class Autosuggest extends Component {
}

this.maybeCallOnSuggestionsUpdateRequested({ value: clickedSuggestionValue, reason: 'click' });

setTimeout(() => {
this.justClickedOnSuggestion = false;
});
};
const itemProps = ({ sectionIndex, itemIndex }) => {
return {
Expand Down