[HOLD for payment 2024-10-25] [HOLD for payment 2024-10-24] [$250] Android - Room -On entering multiline text with header markdown, 2nd line is not visible

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.26
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4904629
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Tap on a room chat
3. Tap header -- description
4. Enter a multiline text with header markdown

Expected Result:

On entering multiline text with header markdown, 2nd line must be visible.

Actual Result:

On entering multiline text with header markdown, 2nd line is not visible.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6586126_1724906639755.Screenrecorder-2024-08-29-10-08-19-950_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0166150593d62a36c2
• Upwork Job ID: 1829289632232865933
• Last Price Increase: 2024-09-19
• Automatic offers:
• alitoshmatov | Reviewer | 104139938
• tsa321 | Contributor | 104139940

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@trjExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[trjExpensify]

Reproducible:

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0166150593d62a36c2

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @alitoshmatov (External)

[jp928]

Proposal

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

The room description on Android is cut off when typein multiple lines.

What is the root cause of that problem?

App/src/styles/utils/index.ts

Line 1242 in 9e82ed8

height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth,

function getAutoGrowHeightInputStyle doesn't workout a correct height. Consider to use maxHeight: '100%' instead, because we have clamp height on the container element.

App/src/styles/index.ts

Line 1158 in 9e82ed8

autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>

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

function getAutoGrowHeightInputStyle doesn't workout a correct height. Consider to use maxHeight: '100%' instead, because we have clamp height on the container element.

What alternative solutions did you explore? (Optional)

NA
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2023-10-01T00:00:00Z.

Proposal

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

Room -On entering multiline text with header markdown, 2nd line is not visible

What is the root cause of that problem?

To fix scroll bar flickering issue on line breaks we are the text input height here

App/src/components/TextInput/BaseTextInput/index.tsx

Lines 386 to 389 in e66b123

	// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
	...(autoGrowHeight
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),

So the input has a fixed height so to allow autoGrow of height for multiline we are setting the height of the container to textInputHeight here

App/src/components/TextInput/BaseTextInput/index.tsx

Line 300 in e66b123

autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),

this textInputHeight is determined by the layout of an invisible Text here

App/src/components/TextInput/BaseTextInput/index.tsx

Line 512 in e66b123

setTextInputHeight(e.nativeEvent.layout.height);

But in our case the InputComponent is RNMarkdownTextInput which styles the text value based on the markdown and in this case when the user inputs header markdown it is bold and takes more space/width so jumps to the next line with fewer characters than where the normal invisible Text component discussed above which we use to calculate the textInputHeight.

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

The scroll-bar flickering problem is only for normal RNTextInput and doesn't occur for RNMarkdownTextInput so we need only to apply manual height for !isMarkdownEnabled case
So change

App/src/styles/utils/index.ts

Lines 1229 to 1242 in e66b123

	getAutoGrowHeightInputStyle: (textInputHeight: number, maxHeight: number): ViewStyle => {
	if (textInputHeight > maxHeight) {
	return {
	...styles.pr0,
	...styles.overflowAuto,
	};
	}
	return {
	...styles.pr0,
	...styles.overflowHidden,
	// maxHeight is not of the input only but the of the whole input container
	// which also includes the top padding and bottom border
	height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth,

getAutoGrowHeightInputStyle: (textInputHeight: number, maxHeight: number, includeHeight = true): ViewStyle => {
        if (textInputHeight > maxHeight) {
            return {
                ...styles.pr0,
                ...styles.overflowAuto,
            };
        }

        return {
            ...styles.pr0,
            ...styles.overflowHidden,
            // maxHeight is not of the input only but the of the whole input container
            // which also includes the top padding and bottom border
            ...(includeHeight && {['height']: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth}),
        };

App/src/styles/index.ts

Lines 1158 to 1162 in e66b123

	autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
	({
	height: lodashClamp(textInputHeight, minHeight, maxHeight),
	minHeight,
	} satisfies ViewStyle),

autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number, includeHeight = true) =>
            ({
                ...(includeHeight && {height: lodashClamp(textInputHeight, minHeight, maxHeight)}),
                ...(!includeHeight && {maxHeight}),
                minHeight,
            } satisfies ViewStyle),

App/src/components/TextInput/BaseTextInput/index.tsx

Line 300 in e66b123

autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),

autoGrowHeight &&
                            styles.autoGrowHeightInputContainer(
                                textInputHeight,
                                variables.componentSizeLarge,
                                typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0,
                                !isMarkdownEnabled,
                            ),

App/src/components/TextInput/BaseTextInput/index.tsx

Line 388 in e66b123

? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]

 ? [
                                              StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, !isMarkdownEnabled),
                                              styles.verticalAlignTop,
                                          ]

and apply same for native files too
Here is a test branch

What alternative solutions did you explore? (Optional)

[excile1]

Proposal

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

The problem is that multi-line text is being cut off when you are using the heading (#) markdown.

What is the root cause of that problem?

Now, there actually seems to be 2 different root causes for this issue.

1. The first one is, that the text with the heading markdown is bolder and, sometimes, the font size is larger, but the auto grow feature does not account for that in any way, since it is based on a hidden <Text> component, which doesn't support live markdown.
   

   App/src/components/TextInput/BaseTextInput/index.tsx

   Lines 485 to 520 in 537c62a

   	{/*
   	Text input component doesn't support auto grow by default.
   	We're using a hidden text input to achieve that.
   	This text view is used to calculate width or height of the input value given textStyle in this component.
   	This Text component is intentionally positioned out of the screen.
   	*/}
   	{(!!autoGrow || autoGrowHeight) && (
   	// Add +2 to width on Safari browsers so that text is not cut off due to the cursor or when changing the value
   	// Reference: https://github.com/Expensify/App/issues/8158, https://github.com/Expensify/App/issues/26628
   	// For mobile Chrome, ensure proper display of the text selection handle (blue bubble down).
   	// Reference: https://github.com/Expensify/App/issues/34921
   	<Text
   	style={[
   	inputStyle,
   	autoGrowHeight && styles.autoGrowHeightHiddenInput(width ?? 0, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : undefined),
   	styles.hiddenElementOutsideOfWindow,
   	styles.visibilityHidden,
   	]}
   	onLayout={(e) => {
   	if (e.nativeEvent.layout.width === 0 && e.nativeEvent.layout.height === 0) {
   	return;
   	}
   	let additionalWidth = 0;
   	if (Browser.isMobileSafari() || Browser.isSafari() || Browser.isMobileChrome()) {
   	additionalWidth = 2;
   	}
   	setTextInputWidth(e.nativeEvent.layout.width + additionalWidth);
   	setTextInputHeight(e.nativeEvent.layout.height);
   	}}
   	>
   	{/* \u200B added to solve the issue of not expanding the text input enough when the value ends with '\n' (https://github.com/Expensify/App/issues/21271) */}
   	{value ? `${value}${value.endsWith('\n') ? '\u200B' : ''}` : placeholder}
   	</Text>
   	)}
   	</>
   	);

   
   Although, fixing only this part of the issue is not enough. Here you can see that the auto grow feature works properly, but it is still cut off on the mobile version of the app:

rec1.mp4

2. Here, notice that when I add the heading markdown, the text almost "shifts" down, which is causing this visual bug. So, the 2nd part of the issue is actually an issue in @expensify/react-native-live-markdown node module. In the MarkdownUtils.java, we can see that for the h1 or the heading markdown, it takes the current line-height and multiplies it by 1.5, which is causing the text's height to overflow and take up more space.
   https://github.com/Expensify/react-native-live-markdown/blob/037a1b0107263314ad5cdc710fa862280f65ea32/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java#L148-L157
   After fixing the node module, we can see that it finally works properly:

rec2.mp4

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

1. I fixed the first part of the issue by changing how the hidden <Text> component behaves. I changed the code to extract every line from the inputted text, and wrap it in styles.textLarge and styles.textBold if it starts with the heading markdown (# ). That way, the hidden <Text> component correctly represents the width/height of the user's input.
   (here I unhid the hidden <Text> component)

The changes I made:

{value?.split('\n').map((line, idx) => {
    let formattedLine = line;
    if (idx > 0) {
        formattedLine = '\n\u200B' + line;
    }
    if (isMarkdownEnabled && line.startsWith("# ")) {
        return <Text style={[styles.textLarge, styles.textBold]} key={idx}>{formattedLine}</Text>;
    }
    return <Text key={idx}>{formattedLine}</Text>;
})}

2. Fixing the second problem will require a separate issue/PR in the @expensify/react-native-live-markdown repository. For this test, I commented out the problematic line, but the proper solution I'm thinking of is to either try to extrapolate the lineHeight based on how much the fontSize changed, but I think the best solution would be to remove the default behavior of forcing lineHeight to 1.5x, while still allowing to provide a custom lineHeight in the markdown style.
   Also, there is a little typo:
   
   (custom decription)
   which can be fixed here:
   

   App/src/languages/en.ts

   Line 1479 in 76f16bc

   explainerText: 'Set a custom decription for the room.',

What alternative solutions did you explore? (Optional)

An alternative solution that we can take in case we don't want to alter the @expensify/react-native-live-markdown repository is to remove the lineHeight property from the styles on the app's side here:

App/src/styles/index.ts

Lines 1213 to 1222 in 76f16bc

	baseTextInput: {
	...FontUtils.fontFamily.platform.EXP_NEUE,
	fontSize: variables.fontSizeNormal,
	lineHeight: variables.lineHeightXLarge,
	color: theme.text,
	paddingTop: 23,
	paddingBottom: 8,
	paddingLeft: 0,
	borderWidth: 0,
	},

(so, when it tries to 1.5x the lineHeight, it's not going to have an effect, but I still think my initial solution would be better)

[tsa321]

Proposal

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

Auto grow height of markdown text input doesn't grow properly, Like in room description text input.

What is the root cause of that problem?

The TextInput doens't have autoGrow functionality which make the baseTexinput autoGrowHeight of baseTextInput use hidden Text to grow the TextInput properly as shown in:

App/src/components/TextInput/BaseTextInput/index.tsx

Lines 491 to 513 in fc849dd

	{(!!autoGrow || autoGrowHeight) && (
	// Add +2 to width on Safari browsers so that text is not cut off due to the cursor or when changing the value
	// Reference: https://github.com/Expensify/App/issues/8158, https://github.com/Expensify/App/issues/26628
	// For mobile Chrome, ensure proper display of the text selection handle (blue bubble down).
	// Reference: https://github.com/Expensify/App/issues/34921
	<Text
	style={[
	inputStyle,
	autoGrowHeight && styles.autoGrowHeightHiddenInput(width ?? 0, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : undefined),
	styles.hiddenElementOutsideOfWindow,
	styles.visibilityHidden,
	]}
	onLayout={(e) => {
	if (e.nativeEvent.layout.width === 0 && e.nativeEvent.layout.height === 0) {
	return;
	}
	let additionalWidth = 0;
	if (Browser.isMobileSafari() || Browser.isSafari() || Browser.isMobileChrome()) {
	additionalWidth = 2;
	}
	setTextInputWidth(e.nativeEvent.layout.width + additionalWidth);
	setTextInputHeight(e.nativeEvent.layout.height);
	}}

in onLayout property the height and width of text input is adjusted.
This only works for non markdown text input, but if the markdown is used, there is styling inside the displayed textinput which will make the the hidden Text doesn't represent the correct representation of the displayed text. If Heading is used, the certain text will become large, if italic style is used the text grow smaller , etc. This will interfere with auto grow heightfunctionality of the markdown.

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

The react native live markdown has auto grow height functionality, we could use it and disable the usage of the hidden Text to detect the size of textInput widht/height. Some styling inside baseTextInput interfere with the auto grow of the markdown, so here is some modifications of the code:

We add variable : const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight;
Then we add verticalPadding variable:

    const verticalPadding = useMemo (() => {
        const flattenedInputStyle = StyleSheet.flatten(inputStyle);
        const topBottomPadding = (flattenedInputStyle.paddingTop ?? 0) + (flattenedInputStyle.paddingBottom ?? 0);
        if (topBottomPadding !== 0) {
            return topBottomPadding;
        }

        return flattenedInputStyle.padding ?? 0;
    }, [inputStyle]);

This is needed, because the maxHeight style of the markdown doesn't include the padding, so we compute the vertical padding then subtract the maxAutoGrowHeight with the vertical padding.
The maxHeight here enable the auto grow height to grow properly.
Then in :

App/src/components/TextInput/BaseTextInput/index.tsx

Line 300 in fc849dd

autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),

We change it to:

(autoGrowHeight && !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0))

here:

App/src/components/TextInput/BaseTextInput/index.tsx

Line 327 in fc849dd

<View style={[styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>

change it to:

<View style={[isAutoGrowHeightMarkdown ? undefined : styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>

Then below this line:

App/src/components/TextInput/BaseTextInput/index.tsx

Line 373 in fc849dd

inputPaddingRight,

we set the maxHeight of markdown:

isAutoGrowHeightMarkdown? {maxHeight: maxAutoGrowHeight - verticalPadding} : undefined,

Then change the conditional in:

App/src/components/TextInput/BaseTextInput/index.tsx

Line 387 in fc849dd

...(autoGrowHeight

to be ...(autoGrowHeight && !isAutoGrowHeightMarkdown

Then we disable the hidden text input:
In here:

App/src/components/TextInput/BaseTextInput/index.tsx

Line 462 in fc849dd

{contentWidth && (

change it to : {contentWidth && !isAutoGrowHeightMarkdown (

and in here:

App/src/components/TextInput/BaseTextInput/index.tsx

Line 491 in fc849dd

{(!!autoGrow || autoGrowHeight) && (

change it to: {(!!autoGrow || autoGrowHeight) && !isAutoGrowHeightMarkdown && (

Then do similarly in baseTextinput.native.tsx
For code changes reference I have made a test branch.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[trjExpensify]

@alitoshmatov can you give these proposals a review, please?

[alitoshmatov]

@jp928 Thank you for your proposal, not sure what you mean exactly but maxHeight is used to calculate input height based on text, padding and other factors. Setting it to 100% in getAutoGrowHeightInputStyle function is not possible since it is expecting number and doing calculations on it.

[alitoshmatov]

@FitseTLT Thank you for your proposal, your RCA is correct. But your solution is not working on native app.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-09-03.at.17.57.06.mp4

[FitseTLT]

@FitseTLT Thank you for your proposal, your RCA is correct. But your solution is not working on native app.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-09-03.at.17.57.06.mp4

It's because Same change should be applied on .native files too that's why it is not working for native I have added comment on that @alitoshmatov

[alitoshmatov]

@FitseTLT I think I added all needed changes I even checkout out to your provided branch before applying changes. Maybe I missed something, can you make sure changes are working in you ios native app and if yes provide me with detailed change for native too or you can update your branch

[alitoshmatov]

@excile1 Thank you for your proposal, your RCA is correct. Your solution looks to be working fine, the 2nd bug you specified does not seem to be present in ios app. I just applied your first solution and ios app is working fine. Let me do some research for on the second bug and other platforms

[FitseTLT]

@FitseTLT I think I added all needed changes I even checkout out to your provided branch before applying changes. Maybe I missed something, can you make sure changes are working in you ios native app and if yes provide me with detailed change for native too or you can update your branch

@alitoshmatov I didn't add the changes in native files in my branch, sorry that's why I included a note on my proposal to add it but now I have updated my test branch by include the same changes for native platforms 👍 U can check.

[excile1]

@excile1 Thank you for your proposal, your RCA is correct. Your solution looks to be working fine, the 2nd bug you specified does not seem to be present in ios app. I just applied your first solution and ios app is working fine. Let me do some research for on the second bug and other platforms

Yep. It looks like the second bug is specific to android, it doesn't seem to be consistent with other platforms

[alitoshmatov]

@FitseTLT Still not working, can you share a screen recording of it working on your ios app

edit: Just checked, it is not working in android either.

[alitoshmatov]

@tsa321 Thank you for your proposal, Your solution is working on ios fine, but have some issues on android

Screen.Recording.2024-09-03.at.9.04.41.PM.mov

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• Fix auto grow of base text input using markdown component #49896
• [CP Staging] Fix some text inputs are unaligned if there are prefix characters #50795

If no regressions arise, payment will be issued on 2024-10-24. 🎊

For reference, here are some details about the assignees on this issue:

• @alitoshmatov requires payment automatic offer (Reviewer)
• @tsa321 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@alitoshmatov] The PR that introduced the bug has been identified. Link to the PR:
• [@alitoshmatov] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@alitoshmatov] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@alitoshmatov] Determine if we should create a regression test for this bug.
• [@alitoshmatov] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

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

• [CP Staging] Fix some text inputs are unaligned if there are prefix characters #50795

If no regressions arise, payment will be issued on 2024-10-25. 🎊

For reference, here are some details about the assignees on this issue:

• @alitoshmatov requires payment automatic offer (Reviewer)
• @tsa321 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@alitoshmatov] The PR that introduced the bug has been identified. Link to the PR:
• [@alitoshmatov] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@alitoshmatov] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@alitoshmatov] Determine if we should create a regression test for this bug.
• [@alitoshmatov] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[trjExpensify]

Payments are due tomorrow. Checklist time, please. Thanks!

[trjExpensify]

Bump on the checklist!

[alitoshmatov]

• The PR that introduced the bug has been identified. Link to the PR: Implement Live Markdown for task descriptions #39519
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/39519/files#r1818147542
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No need
• Determine if we should create a regression test for this bug.

Regression Test Proposal

1. Go to any room
2. Go to room description
3. Enter multi-line title using markdown like # Title
4. Make sure input height is correctly adjusting to new lines, and lines is not cut in half

[trjExpensify]

Thanks! Confirming payments made as follows, accounting for a deduction for 1 regression:

• $125 to @tsa321 for the fix
• $125 to @alitoshmatov for the review

This was caught with an existing regression test linked in the OP, so I'm not adding a new one. Paid, and closing!

[melvin-bot]

@justinpersaud @trjExpensify Be sure to fill out the Contact List!