[HOLD for payment 2022-07-15] [$250] Emoji Search Bar focus indicator is missing - reported by Santhoshkumar Sellavel

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open new Expensify in web/desktop
2. Open any chat
3. Click on the emoji icon in the composer
4. Enter the search input

Expected Result:

Search input has a focus indicator, like other search inputs

Actual Result:

Search input has no focus indicator.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number: 1.1.76-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Screen.Recording.2022-05-21.at.2.48.45.AM.mov

Issue reported by: @Santhosh-Sellavel
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1653082016688519

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @MitchExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Puneet-here]

Proposal

We can make a state isFocused and we can make it true at onFocus and false at onBlur

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Lines 437 to 442 in 6bac9af

	<Composer
	textAlignVertical="top"
	placeholder={this.props.translate('common.search')}
	placeholderTextColor={themeColors.textSupporting}
	onChangeText={this.filterEmojis}
	style={styles.textInput}

we need to use it like this:

onFocus={() => this.setState({isFocused: true})}
onBlur={() => this.setState({isFocused: false})}

now we have to use isFocused to change border color. We can do that by using the below line at composer

 style={[styles.textInput, this.state.isFocused && styles.borderColorFocus]}

[Harshdeepjoshi]

Proposal

we should use TextInput instead of Composer as Composer is intended to compose messages and should not be used in this place.

App/src/components/EmojiPicker/EmojiPickerMenu/index.js

Lines 437 to 442 in 6bac9af

	<Composer
	textAlignVertical="top"
	placeholder={this.props.translate('common.search')}
	placeholderTextColor={themeColors.textSupporting}
	onChangeText={this.filterEmojis}
	style={styles.textInput}

we should do

<TextInput 
textAlignVertical="top" 
placeholder={this.props.translate('common.search')} 
placeholderTextColor={themeColors.textSupporting} 
onChangeText={this.filterEmojis} 
style={styles.textInput}

Doing this would solve the issue but will alter the height of the input field slightly, but it would be the same as all the other input fields so I think this would not be a problem but, it could be changed if necessary.

[MitchExpensify]

This would be consistent but I'm not sure it adds much value, do you think this change is worth it in the name of consistency @michelle-thompson ?

[michelle-thompson]

Hmm, not sure what would be best here so adding Engineering label here!

[michelle-thompson]

Hmm, not sure what would be best here so adding Engineering label here!

[melvin-bot]

Triggered auto assignment to @TomatoToaster (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[TomatoToaster]

I think it's worth fixing this - it's definitely a small visual change but it feels like it would look better. I'm not on the management team so I'll let an engineer from there review the proposals and confirm this is worth it.