When blurring the emoji picker search field, it wobbles if it is not empty

[izarutskaya]

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. Go to any report
2. Open the reaction menu on a message
3. Write something in the emoji search field
4. Blur the search field by clicking elsewhere

Expected Result:

The emoji search field should behave like other input fields - it should not wobbl

Actual Result:

The emoji search field wobbles

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.60-1

Reproducible in staging?: Y

Reproducible in production?: Y

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-22.At.20.13.38.mp4

Recording.1413.mp4

Expensify/Expensify Issue URL:

Issue reported by: @joh42

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692728174404989

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kbecciv]

Proposal from @joh42
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692728174404989

Proposal

Please re-state the problem that we are trying to solve in this issue.

When blurring the emoji picker search field, it wobbles if it is not empty.

What is the root cause of that problem?

The root cause of the issue is that the BaseTextInput component checks the length of the value prop before animating the label:

App/src/components/TextInput/BaseTextInput.js

Lines 112 to 117 in 44eb88a

	const deactivateLabel = useCallback(() => {
	const value = props.value || '';
	if (props.forceActiveLabel || value.length !== 0 || props.prefixCharacter) {
	return;
	}

But the EmojiPickerMenu does not pass any value prop:

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

Lines 536 to 549 in 44eb88a

	<TextInput
	label={this.props.translate('common.search')}
	accessibilityLabel={this.props.translate('common.search')}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	onChangeText={this.filterEmojis}
	defaultValue=""
	ref={(el) => (this.searchInput = el)}
	autoFocus={this.shouldFocusInputOnScreenFocus}
	selectTextOnFocus={this.state.selectTextOnFocus}
	onSelectionChange={this.onSelectionChange}
	onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}
	onBlur={() => this.setState({isFocused: false})}
	autoCorrect={false}
	/>

This means that even if the text input is not empty, label deactivation will begin, leading to the buggy animation.

Previously, the value of the input was stored inside of the BaseTextInput component, but there was a conscious decision made to remove that in this PR. Since then the value prop has been used to determine if the label should animate back or not.

What changes do you think we should make in order to solve the problem?

There is already a ref, called hasValueRef inside the BaseTextInput component that keeps track of whether or not the input has a value:

App/src/components/TextInput/BaseTextInput.js

Lines 184 to 186 in 44eb88a

	// We capture whether the input has a value or not in a ref.
	// It gets updated when the text gets changed.
	const hasValueRef = useRef(inputValue.length > 0);

I suggest we check that ref as well in the deactivateLabel function's early return:

App/src/components/TextInput/BaseTextInput.js

Lines 112 to 117 in 44eb88a

	const deactivateLabel = useCallback(() => {
	const value = props.value || '';
	if (props.forceActiveLabel || value.length !== 0 || props.prefixCharacter) {
	return;
	}

Which would look something like this:

if (props.forceActiveLabel || props.prefixCharacter || hasValueRef.current) {
    return;
}

If the input has a value, we do not want the deactivation animation of the label to start. We could likely remove the check of the length of the value prop entirely in that conditional, since checking hasValueRef accomplishes the same thing.

This approach makes the most sense IMO. I think hinging the animation logic on the length of a prop that isn't required is suboptimal when the BaseTextInput component already stores whether or not the text input is empty.

What alternative solutions did you explore? (Optional)

Alternative solution 1

Alternatively we could pass the value prop from the EmojiPickerMenu component to the BaseTextInput component. I do not think this approach is the best one, as the EmojiPickerMenu currently does not actually store the search term. Rather, it is used right away to filter emojis:

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

Line 540 in 44eb88a

onChangeText={this.filterEmojis}

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

Lines 419 to 420 in fc9378e

	filterEmojis(searchTerm) {
	const normalizedSearchTerm = searchTerm.toLowerCase().trim().replaceAll(':', '');

As such we would have to start storing the search term in both the regular EmojiPickerMenu and the native EmojiPickerMenu just so that the BaseTextInput label can animate correctly.

If we choose this approach, I think we should consider making the value prop required to make it clear that the BaseTextInput component does not function 100% correctly without it.

Alternative solution 2

Another alternative would be to start storing the current input value in the BaseTextInput component again. I do not really think this is worth considering, given that a decision has been made to not store the current input value in the BaseTextInput component, but it is an option. It is also not really required, since we are only interested in whether or not the input is empty, not the actual value of the input.

[bernhardoj]

Should be fixed in #26399

[laurenreidexpensify]

Closing for #26399