Commit 1b88ab97 authored by Saturnino Abril's avatar Saturnino Abril Committed by Harrison Healey
Browse files

[MM-12971] Fix autocomplete selection for classic app (#2065)

* fix autocomplete selection for classic app

* added comment for Safari and iOS classic app behaviour
parent 0aab376d
......@@ -12,7 +12,6 @@ import * as UserAgent from 'utils/user_agent.jsx';
import * as Utils from 'utils/utils.jsx';
const KeyCodes = Constants.KeyCodes;
const MIN_TIME_BEFORE_CLICK = 200;
export default class SuggestionBox extends React.Component {
static propTypes = {
......@@ -202,18 +201,16 @@ export default class SuggestionBox extends React.Component {
return;
}
this.setState({focused: false});
if (UserAgent.isIos() && !e.relatedTarget) {
// iOS doesn't support e.relatedTarget, so we need to use the old method of just delaying the
// blur so that click handlers on the list items still register
if (this.presentationType !== 'date' || this.props.value.length === 0) {
this.handleEmitClearSuggestions(MIN_TIME_BEFORE_CLICK);
}
} else {
this.handleEmitClearSuggestions();
// On Safari and iOS classic app, the autocomplete stays open
// when you tap outside of the post textbox or search box.
return;
}
this.handleEmitClearSuggestions();
this.setState({focused: false});
if (this.props.onBlur) {
this.props.onBlur();
}
......
......@@ -2,12 +2,27 @@
// See LICENSE.txt for license information.
import React from 'react';
import {mount} from 'enzyme';
import {shallow, mount} from 'enzyme';
import SuggestionBox from 'components/suggestion/suggestion_box.jsx';
import SuggestionList from 'components/suggestion/suggestion_list.jsx';
jest.mock('utils/user_agent', () => {
const original = require.requireActual('utils/user_agent');
return {
...original,
isIos: jest.fn().mockReturnValue(true),
};
});
describe('components/SuggestionBox', () => {
const baseProps = {
listComponent: SuggestionList,
value: 'value',
containerClass: 'test',
openOnFocus: true,
};
test('findOverlap', () => {
expect(SuggestionBox.findOverlap('', 'blue')).toBe('');
expect(SuggestionBox.findOverlap('red', '')).toBe('');
......@@ -19,18 +34,43 @@ describe('components/SuggestionBox', () => {
});
test('should avoid ref access on unmount race', (done) => {
const props = {
listComponent: SuggestionList,
value: 'value',
containerClass: 'test',
openOnFocus: true,
};
const wrapper = mount(
<SuggestionBox {...props}/>
<SuggestionBox {...baseProps}/>
);
wrapper.instance().handleFocusIn({});
wrapper.unmount();
done();
});
test('should match state and/or call function on handleFocusOut', () => {
const onBlur = jest.fn();
const wrapper = shallow(
<SuggestionBox
{...baseProps}
onBlur={onBlur}
/>
);
wrapper.setState({focused: true});
const instance = wrapper.instance();
const contains = jest.fn().mockReturnValueOnce(true).mockReturnValue(false);
const relatedTarget = jest.fn();
instance.container = {contains};
instance.handleEmitClearSuggestions = jest.fn();
instance.handleFocusOut({relatedTarget});
expect(instance.handleEmitClearSuggestions).not.toBeCalled();
expect(wrapper.state('focused')).toEqual(true);
expect(onBlur).not.toBeCalled();
// test for iOS agent
instance.handleFocusOut({});
expect(instance.handleEmitClearSuggestions).not.toBeCalled();
expect(wrapper.state('focused')).toEqual(true);
expect(onBlur).not.toBeCalled();
instance.handleFocusOut({relatedTarget});
expect(instance.handleEmitClearSuggestions).toBeCalledTimes(1);
expect(wrapper.state('focused')).toEqual(false);
expect(onBlur).toBeCalledTimes(1);
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment