Blur input on touch devices when clicking on the rest of the page. #170
Conversation
| const oldY = this.touchStart && this.touchStart.clientY || Number.MAX_VALUE; | ||
|
|
||
| if (!this.justTouchedInput && !this.justClickedOnSuggestion && | ||
| Math.abs(oldX - clientX) < 20 && Math.abs(oldY - clientY) < 20) { |
There was a problem hiding this comment.
Could you explain please what's going on here?
There was a problem hiding this comment.
My goal is to blur the input if the user taps on the page, but not blur it if the user scrolls or zooms. So I work out if the first touch object has moved more than 20px in the x or y direction since the touchstart event. Ideally I would bind to the click event, but on ios the click event is not bubbled to the document unless the target has css cursor: pointer http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
|
@andysprout Thanks a lot for this! |
|
I can have a go, while trying to fix the issue that makes ios inconsistent I managed to find and fix two other bugs - I'll try to create separate prs for those bug fixes, but the ios fix will be dependant on them. |
|
Created #175 I'll update this PR if that is merged in. |
| @@ -46,8 +46,8 @@ function mapToAutowhateverTheme(theme) { | |||
| return result; | |||
| } | |||
|
|
|||
| export default class AutosuggestContainer extends Component { | |||
| static propTypes = { | |||
| export default React.createClass({ | |||
There was a problem hiding this comment.
I'd probably keep this as a class since the React "eventual goal is for ES6 classes to replace React.createClass completely".
…ouchUp to reset the justClickedOnSuggestion flag
…ting a very weird bug where mouseup/touchstart/touchend on the page would cause all three of the handlers in the example to be fired three times). Make logic around detemining a tap vs tap-drag a bit neater.
|
Rebased and reverted back to ES6 classes |
|
@moroshko, @nkbt, @andysprout, can somebody please help me with this? I'm having issue and this might fix it. |
|
Having the same issue here @andysprout @moroshko When I'm on iPad, after selecting an option ( |
|
@matheusml What you are describing sounds like a different issue. Have you tried: |
|
Closing for no activity. |
|
@moroshko focusInputOnSuggestionClick still not working on ios devices. - (ios 12.x)2019 |
Before this change
On Safari (Mac OS), Chrome (Mac OS and android and Mac OS with touch device emulation):
<input>element<input>element is focused<input>element loses focusOn Mobile Safari (iOS) and Chrome (iOS):
<input>element<input>element is focused<input>element does NOT lose focusThe only way to cause it to loose focus was to click on another element that could receive focus or to press the 'minimise' button on the device's keyboard.
After this change
On Safari (Mac OS), Chrome (Mac OS, android and iOS), Mobile Safari (iOS):
<input>element<input>element is focused<input>element loses focusThis replicates the behaviour of the search box on http://google.com
Also fixed bug where the user tapped or clicked on a suggestion, then dragged outside the component meaning the
mouseuportouchendevent wasn't triggered on the suggestion, so thejustClickedSuggestionflag was not reset.I tried to create some tests for this, but failed to correctly trigger events on the document.