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.