Input switch between focus and blurr state on click & label is selected with respect to input text

[parasharrajat]

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 Profile Page.
2. Click on the First name input.
3. Now click on the First Name label over it. You should see that input is losing focus and then regaining it.
4. Now click on the text on the input.
5. Now click on the empty area on the right side of First Name label inside the whole blue box.
6. You should see that input is losing focus and then regaining it..

Expected Result:

Already focused input should not switch between focused and blur state. the label should be static after the first focus. label text should not be selectable.

Actual Result:

Input switch between blur and focused state. Label text is selectable.

Workaround:

None. UI glitch

Platform:

Where is this issue occurring?

• Web
• Desktop App

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

input-lag.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

view this job

[MelvinBot]

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

[AlfredoAlc]

PROPOSAL

1. Make the label text not selectable: Set selectable prop of Animated.Text to false.

App/src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js

Lines 6 to 25 in 75a1fe0

	const ExpensiTextInputLabel = ({
	label,
	labelTranslateY,
	labelTranslateX,
	labelScale,
	}) => (
	<Animated.Text
	style={[
	styles.expensiTextInputLabel,
	styles.expensiTextInputLabelDesktop,
	styles.expensiTextInputLabelTransformation(
	labelTranslateY,
	labelTranslateX,
	labelScale,
	),
	]}
	>
	{label}
	</Animated.Text>
	);

2. To prevent the TextInput to switch between blur and focus, it needs to change some styling:

• In expensiTextInputLabel, setting the zIndex prop to -1, to keep from interfering with TextInput area.
  

  App/src/styles/styles.js

  Lines 514 to 522 in 75a1fe0

  	expensiTextInputLabel: {
  	position: 'absolute',
  	left: 12,
  	top: 14,
  	fontSize: variables.fontSizeNormal,
  	color: themeColors.textSupporting,
  	fontFamily: fontFamily.GTA,
  	width: '100%',
  	},

• Change expensiTextInputContainer padding props to expensiTextInput.
  

  App/src/styles/styles.js

  Lines 502 to 513 in 75a1fe0

  	expensiTextInputContainer: {
  	flex: 1,
  	borderWidth: 1,
  	borderRadius: variables.componentBorderRadiusNormal,
  	borderColor: themeColors.border,
  	paddingTop: 25,
  	paddingBottom: 8,
  	paddingHorizontal: 12,
  	justifyContent: 'center',
  	height: '100%',
  	backgroundColor: themeColors.componentBG,
  	},

The area of the TextInput is limited by the padding of the TouchableWithoutFeedback which is what triggers focus on the TextInput, by passing that padding into the TextInput style, the styling is the same but the area of the TextInput increases at the same size of the container.

This is the area of the TextInput (Black border), that is why if the user clicks somewhere outside this area, blur is called.

By moving the padding props from TouchableWithoutFeedback to TextInput, the area will be the following (Black border).

[conorpendergrast]

@parasharrajat I'm struggling to reproduce this one too! I'm on web app Staging (v1.0.83-1) and It looks like I'm seeing something different. Is the account you're seeing this on a beta that I can add?

[parasharrajat]

@conorpendergrast Sorry, it's a little early. This is yet to be deployed to staging.

[MelvinBot]

@parasharrajat Huh... This is 4 days overdue. Who can take care of this?

[MelvinBot]

@parasharrajat 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[MelvinBot]

@parasharrajat 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[parasharrajat]

I am sure about the process anymore. cc: @mallenexpensify .
I used to think that proposals should be submitted after the task is triaged but that is not the case anymore and why the engineer was removed from this issue.

[mallenexpensify]

@parasharrajat , right now it's still in the triage state because Conor wasn't able to reproduce. After triage it goes to our general Engineering pool to see if the issue can be worked on by an External contributor. The it's assigned to a Contributor Manager (CM) to post to upwork then a Contributor Manager Engineer (CME ) is assigned to review proposals.
Is the issue reproducible on staging and/or production now?

[parasharrajat]

Yes, it is reproducible on Staging.

[MelvinBot]

@parasharrajat Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mallenexpensify]

@parasharrajat I'm still unable to reproduce on web-staging. Should I be doing something else?

2021-08-25_08-07-24.mp4

[parasharrajat]

Look at the Video https://user-images.githubusercontent.com/24370807/128778144-f822a3e3-7596-4efc-a97b-d441fb746719.mp4 @mallenexpensify

I am clicking on the label and you can also try clicking the empty area next to the label.

[mallenexpensify]

I see it in your vid, is that web? If so, what browsers? and... can you confirm you're on staging?
I tried firefox and chrome on staging and was unable to reproduce

[parasharrajat]

@mallenexpensify I found this on staging v1.0.86-10 Web firefox/It's also on chrome.

input.mp4

[MelvinBot]

@parasharrajat Eep! 4 days overdue now. Issues have feelings too...

[parasharrajat]

I would be reviewing PR for this issue @timszot and update on the PR if that is ready for final review or merge.

[timszot]

PR caused a regression, it's being worked on still, not overdue.

[parasharrajat]

PR caused another regression #5704 (comment).

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.8-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Change style for TextInput area #5704
• Remove pointer events from label, modify styling of textinput #5858
• Adds background to label #5959

If no regressions arise, payment will be issued on 2021-10-30. 🎊

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.10-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Adds background to label #5959

If no regressions arise, payment will be issued on 2021-11-04. 🎊

[mallenexpensify]

Paid @AlfredoAlc $250 in Upwork.
@parasharrajat should you be compensated for reporting the issue? I think so... but we've updated a process a lot the past three months :)

[parasharrajat]

@mallenexpensify Yes, I think I should be.

[mallenexpensify]

@parasharrajat , can you apply here then comment on this GH and I'll get you paid. Thanks

[parasharrajat]

@mallenexpensify Done.

[mallenexpensify]

Hired @parasharrajat , let me know once you've accepted and I'll pay (can't wait for this process to be more streamlined, should be soon)

[parasharrajat]

@mallenexpensify Done.

[mallenexpensify]

Paid @parasharrajat in Upwork, closing!