toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

MM-29965 Fix at_mention autocomplete selection bug (#4937) (#4963)

Browse source 
* Adding E2E tests for at mention autocomplete

* Removing mentionComplete from at_mention autocomplete

- The component is already being hidden when there is no valid matchTerm or sections
- Setting mentionComplete to true after an autocomplete was selected prevented the autocomplete from rendering when @ is tapped a second time

* Updating E2E description

* Update detox/e2e/test/autocomplete/at_mention.e2e.js

Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>

* complete at-mention selection when there are no more sections

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
Co-authored-by: Joseph Baylon <joseph.baylon@mattermost.com>
(cherry picked from commit e319a79e42)

Co-authored-by: Andre Vasconcelos <andre.onogoro@gmail.com>
This commit is contained in:
Mattermost Build 2020-11-13 01:12:28 +01:00 committed by GitHub
parent a9497c3e1d
commit 6384f38ea3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/components/autocomplete/at_mention/at_mention.js
View file

@ -61,22 +61,9 @@ export default class AtMention extends PureComponent {
// Not invoked, render nothing.
if (matchTerm === null) {
this.props.onResultCountChange(0);
this.setState({
mentionComplete: false,
sections: [],
});
this.props.onResultCountChange(0);
return;
}
if (this.state.mentionComplete) {
// Mention has been completed. Hide autocomplete.
this.setState({
sections: [],
});
this.props.onResultCountChange(0);
return;
}
@ -107,6 +94,12 @@ export default class AtMention extends PureComponent {
}
}
componentDidUpdate(prevProps, prevState) {
if (prevState.sections.length !== this.state.sections.length && this.state.sections.length === 0) {
this.props.onResultCountChange(0);
}
}
buildSections = (props) => {
const {isSearch, inChannel, outChannel, teamMembers, matchTerm, groups} = props;
const sections = [];
@ -203,7 +196,9 @@ export default class AtMention extends PureComponent {
}
onChangeText(completedDraft);
this.setState({mentionComplete: true});
this.setState({
sections: [],
});
};
renderSectionHeader = ({section}) => {
@ -255,8 +250,8 @@ export default class AtMention extends PureComponent {
render() {
const {maxListHeight, theme, nestedScrollEnabled} = this.props;
const {mentionComplete, sections} = this.state;
if (sections.length === 0 || mentionComplete) {
const {sections} = this.state;
if (sections.length === 0) {
// If we are not in an active state or the mention has been completed return null so nothing is rendered
// other components are not blocked.
return null;

20
detox/e2e/test/autocomplete/at_mention.e2e.js
View file

@ -167,4 +167,24 @@ describe('Autocomplete', () => {
// * Expect at mention autocomplete not to contain associated user suggestion
await expect(element(by.id(`autocomplete.at_mention.item.${user.id}`))).not.toExist();
});
it('MM-T3409_11 should be able to select at mention multiple times', async () => {
// # Type "@" to activate at mention autocomplete
await expect(element(by.id('autocomplete.at_mention.list'))).not.toExist();
await postInput.typeText('@');
await expect(element(by.id('autocomplete.at_mention.list'))).toExist();
// # Type username
await postInput.typeText(user.username);
// # Tap user
await element(by.id(`autocomplete.at_mention.item.${user.id}`)).tap();
// * expect mention autocomplete to dissappear
await expect(element(by.id('autocomplete.at_mention.list'))).not.toExist();
// # Type "@" again to re-activate mention autocomplete
await postInput.typeText('@');
await expect(element(by.id('autocomplete.at_mention.list'))).toExist();
});
});