[HOLD for payment 2023-10-09] [$500] Dev: Web- Console error show when open room name page

[kbecciv]

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. Create a WS
2. Create a room
3. Click the header of the room => Settings => Room bane
4. Observe that an error appears in the console

Expected Result:

No console error

Actual Result:

An error appears in the console: "The prop isFocused is marked as required in RoomNameInput, but its value is undefined."

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: Dev 1.3.70.4
Reproducible in staging?: n
Reproducible in production?: n
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-09-17.at.10.21.18.mov

Expensify/Expensify Issue URL:
Issue reported by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694920701405659

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d4b07b55c8e2063a
• Upwork Job ID: 1703792802906148864
• Last Price Increase: 2023-09-18
• Automatic offers:
• aimane-chnaif | Reviewer | 26875262
• namhihi237 | Contributor | 26875264
• namhihi237 | Reporter | 26875266

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01d4b07b55c8e2063a

[melvin-bot]

Triggered auto assignment to @peterdbarkerUK (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[kbecciv]

Proposal by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694920701405659

Proposal

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

No console error when opening the room name page

What is the root cause of that problem?

The RoomNameInput component uses the prop withNavigationFocusPropTypes here

App/src/components/RoomNameInput/roomNameInputPropTypes.js

Line 32 in c77814f

...withNavigationFocusPropTypes,

We are using RoomNameInput at RoomNamePage which has isFocused as required

App/src/pages/settings/Report/RoomNamePage.js

Lines 99 to 103 in c77814f

	<RoomNameInput
	ref={(ref) => (roomNameInputRef.current = ref)}
	inputID="roomName"
	defaultValue={report.reportName}
	/>

Here we don't pass isFocused so the console shows an error.

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

We should pass the isFocused prop here

const isFocused = useIsFocused();
<RoomNameInput
  ref={(ref) => (roomNameInputRef.current = ref)}
  inputID="roomName"
  defaultValue={report.reportName}
  isFocused={isFocused}
/>;

What alternative solutions did you explore? (Optional)

N/A

[saranshbalyan-1234]

Proposal

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

Getting console errors regarding isFocused propType in console

What is the root cause of that problem?

The component RoomNameInput uses withNavigationFocusPropTypes prop which have isFocused prop as required and should be boolean.

App/src/components/RoomNameInput/roomNameInputPropTypes.js

Lines 31 to 32 in d848eab

	...withNavigationFocusPropTypes,

App/src/components/withNavigationFocus.js

Lines 6 to 9 in bd6f8f7

	const withNavigationFocusPropTypes = {
	isFocused: PropTypes.bool.isRequired,
	};

We have not passed a default prop in case isFocused is not passed explicitly.

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

we should pass default value to isFocused prop as false

App/src/components/RoomNameInput/index.js

Lines 8 to 9 in d848eab

	function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {

function RoomNameInput({isFocused=false, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {

What alternative solutions did you explore? (Optional)

App/src/components/RoomNameInput/roomNameInputPropTypes.js

Lines 34 to 46 in d848eab

	const defaultProps = {
	onChangeText: () => {},
	value: '',
	disabled: false,
	errorText: '',
	forwardedRef: () => {},
	inputID: undefined,
	onBlur: () => {},
	autoFocus: false,
	shouldDelayFocus: false,
	};

we can change default prop value here as well

[ZhenjaHorbach]

Proposal

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

Console error: Failed prop type: The prop isFocused is marked as required in RoomNameInput, but its value is undefined

What is the root cause of that problem?

We don't have default value for isFocused

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

We can set default value for isFocused

Like isFocused: false

App/src/components/RoomNameInput/roomNameInputPropTypes.js

Lines 35 to 46 in 949a7d7

	const defaultProps = {
	onChangeText: () => {},
	value: '',
	disabled: false,
	errorText: '',
	forwardedRef: () => {},
	inputID: undefined,
	onBlur: () => {},
	autoFocus: false,
	shouldDelayFocus: false,
	};

What alternative solutions did you explore? (Optional)

NA

[peterdbarkerUK]

@kbecciv were you able to repro this on dev?

(as per this guidance I'm leaving it for C+)

[kbecciv]

Hello @peterdbarkerUK! QA team can only verify the bug on staging and production.