fix: Change emoji navigation with arrow keys

[mananjadhav]

Details

• Allow the user to go to the first emoji on click of the right arrow
• Allow the user to go to the search input clicking on the left arrow while first emoji is selected.

Fixed Issues

$ #7035

Tests

1. Tested ArrowRight to ensure that it selects the first emoji when the cursor is at the end of the string
2. ArrowDown should ensure that it goes to the first emoji irrespective of the cursor position
3. ArrowUp and ArrowLeft would select the text in the input and rest of the cursor works fine.

• Verify that no errors appear in the JS console

QA Steps

1. Open any chat
2. Open the emoji picker and type a search term
3. If the cursor is at the end of the input, and click the right arrow key
4. It should select the first emoji
5. When the first emoji is selected, and you click left arrow, it should focus the search input and select the text

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

web-emoji-arrow-keys.mov

Mobile Web

NA

Desktop

desktop-emoji-arrow-keys.mov

iOS

NA

Android

NA

[mananjadhav]

@rushatgabhane I've started with this PR. I have a question, can we use onSelectionChange and then set the selection as selection={this.state.selection} for the text input in the following block?

App/src/pages/home/report/EmojiPickerMenu/index.js

Lines 373 to 383 in 913bd46

	<TextInputFocusable
	textAlignVertical="top"
	placeholder={this.props.translate('common.search')}
	placeholderTextColor={themeColors.textSupporting}
	onChangeText={this.filterEmojis}
	style={styles.textInput}
	defaultValue=""
	ref={el => this.searchInput = el}
	autoFocus
	selectTextOnFocus={this.state.selectTextOnFocus}
	/>

I need to be able to set the cursor to the end of the string. At the moment in main as well it goes to the beginning of the string.

[rushatgabhane]

Yeah sure, go ahead

[mananjadhav]

The selection prop isn't working fine with TextInputFocussable. It automatically resets to {start: 0, end: 0} even if I am setting it {start: 5, end: 5}.

I need this resolved because we want the emoji to be highlighted only if the cursor is at the end of the string. Once this is resolved rest is done.

[rushatgabhane]

Allow the user to go to the first emoji on click of the right arrow

Just to clarify, we only wanna go to the first emoji when cursor is at the end of search query.

When typing in the emoji search box, when there are no characters in front of the cursor, you click the right arrow key

As mentioned in the issue description

[rushatgabhane]

The selection prop isn't working fine with TextInputFocussable. It automatically resets to {start: 0, end: 0} even if I am setting it {start: 5, end: 5}.

I think we should skip it then. React Native has an open issue on controlled selection react/react-native#29063

Alternative approach

When search is refocused, we should highlight the search query, so it can be replaced by typing.
Let's do it this way. What do you think?

This can be achieved by selectTextOnFocus prop of TextInput

[mananjadhav]

When search is refocused, we should highlight the search query, so it can be replaced by typing.

That is what is handled with ArrowUp that the whole string is selected. This can be done.

[mananjadhav]

That is what is handled with ArrowUp that the whole string is selected. This can be done.

@rushatgabhane Looks like I was wrong. This isn't how ArrowUp and ArrowDown work. Just confirmed on staging.

1. Irrespective of where my cursor is in the search string, and I click on ArrowDown, it'll go to the first emoji.
2. Clicking on ArrowUp on the first emoji, takes the cursor to the beginning of the search string

While the second one is easy, I feel we might need the selection prop for the first one to know the cursor position so that either it goes to the next character or to the first emoji. Any other suggestions to handle this?

[rushatgabhane]

Gothu, but to verify.

• On ArrowRight, go to first emoji if and only if cursor is at end.
• On ArrowLeft from first emoji, highlight the text.
• Change ArrowUp from just focus to highlight the text.

selection prop for the first one to know the cursor position so that either it goes to the next character or to the first emoji. Any other suggestions to handle this?

Umm, I think you can check if cursor is at end using onSelectionChange callback.

[mananjadhav]

• On ArrowRight, go to first emoji if and only if cursor is at end.
• On ArrowLeft from first emoji, highlight the text.
• Change ArrowUp from just focus to highlight the text.

@rushatgabhane Yeah the updated PR covers the above cases.

[luacmartins]

Just left a small comment. Otherwise LGTM and tests well. Great work @mananjadhav!

[rushatgabhane]

Nice work! Minor suggestions

[rushatgabhane]

LGTM! 🎉

cc: @luacmartins

[luacmartins]

Thanks! @mananjadhav and @parasharrajat!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @luacmartins in version: 1.1.30-4 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @chiragsalian in version: 1.1.31-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅