[HOLD for payment 2022-11-02] [$250] Saving a workspace name should close the keyboard - reported by @chauchausoup

[mvtglobally]

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 workspace section
2. Click on workspace name
3. Form input will come to address the change in the name
4. Once a desired name is input, press save button
5. Keyboard modal doesn’t goes down instead no any freezing behavior is shown on Save button

Expected Result:

Keyboard modal should close
Save button should be frozen as in web app

Actual Result:

Nothing happens. It remains as it is once a desired name is updated.

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.2.1-0
Reproducible in staging?: Y
Reproducible in production?: Y
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.2022-09-04.at.11.52.02.mov

Expensify/Expensify Issue URL:
Issue reported by: @chauchausoup
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1662272007043879

View all open jobs on GitHub

[melvin-bot]

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

[Puneet-here]

Proposal

Add Keyboard.dismiss() after line 64 (not sure if we should dismiss the keyboard before validation or after, do we wanna keep the keyboard open if there is some error?)

App/src/pages/workspace/WorkspaceSettingsPage.js

Lines 61 to 64 in f76f708

	submit() {
	if (this.props.policy.isPolicyUpdating || !this.validate()) {
	return;
	}

We have to do the same for other pages too because it's not only on workspace settings page.

[melvin-bot]

Triggered auto assignment to @Luke9389 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Luke9389]

@Puneet-here please wait for the Help Wanted label to be applied before leaving a proposal. Thanks!

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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 - @rushatgabhane (External)

[melvin-bot]

Current assignee @Luke9389 is eligible for the External assigner, not assigning anyone new.

[Puneet-here]

@Puneet-here please wait for the Help Wanted label to be applied before leaving a proposal. Thanks!

Sorry for proposing early, I like the idea of waiting for the label to be applied. But recently most of the contributors are proposing just after the issue gets created. Because of it we really don't get the chance to propose a solution if we wait for the label.

[vladnyk]

@Puneet-here please wait for the Help Wanted label to be applied before leaving a proposal. Thanks!

Sorry for proposing early, I like the idea of waiting for the label to be applied. But recently most of the contributors are proposing just after the issue gets created. Because of it we really don't get the chance to propose a solution if we wait for the label.

It would be good to add something like below in contributing guideline:

Any proposals before applying External label are ignored, even though they are the best working proposals to the GH.
So if any contributor already proposed before External label by mistake, they need to re-submit proposal again after External applied. This is very risky because any other contributors can just copy a good proposal as soon as External applied.

This way, contributors save time wasting to search for non External issues.

cc: @mallenexpensify (sorry but I am tagging you because you were the last man to update CONTRIBUTING.md)

[Luke9389]

Thanks so much for the feedback!

[mollfpr]

Proposal

I got confused after clicking the save button because there's no feedback and closing the keyboard doesn't make me realize if the save is a success.

I'm suggesting navigating the page back to the workspace initial page after submitting or adding a growl notification.

diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index 40c370abb..ad3503a18 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -23,6 +23,8 @@ import withPolicy, {policyPropTypes, policyDefaultProps} from './withPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';

 const propTypes = {
     ...policyPropTypes,
@@ -65,6 +67,7 @@ class WorkspaceSettingsPage extends React.Component {
         const name = this.state.name.trim();
         const outputCurrency = this.state.currency;
         Policy.updateGeneralSettings(this.props.policy.id, name, outputCurrency);
+        Navigation.navigate(ROUTES.getWorkspaceInitialRoute(this.props.policy.id));
     }

     validate() {

Result

Screen.Recording.2022-09-25.at.00.13.46.mov

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[chauchausoup]

Saving a workspace name should close the keyboard and un select the focus from form input section. Also in case of other input form elements in ios and android app. When I do same thing in web app then the Save button is frozen immediately once its pressed. We need same sort of button freezing effect in ios app.
@mollfpr this is the actual issue as per slack thread.

[rushatgabhane]

Save button should be frozen as in web app

Don't agree with the expected results because https://github.com/Expensify/App/blob/main/contributingGuides/FORMS.md#form-submission

@Luke9389 How about we refactor this page to use Form.js? It should fix this issue and also get a refactor done

[MitchExpensify]

Upwork Job

[syedsaroshfarrukhdot]

Proposal
For dismissing Keyboard we need to add Keyboard.dismiss(); in submit function.

App/src/pages/workspace/WorkspaceSettingsPage.js

Lines 61 to 64 in f76f708

	submit() {
	if (this.props.policy.isPolicyUpdating || !this.validate()) {
	return;
	}

To disable button we need to add isDisabled={this.state.isDisabled ? true : false} in the button props

We need to add a new state isDisabled.

this.state = {
name: props.policy.name,
currency: props.policy.outputCurrency,
isDisabled: true,
};

App/src/pages/workspace/WorkspaceSettingsPage.js

Lines 40 to 43 in f76f708

	this.state = {
	name: props.policy.name,
	currency: props.policy.outputCurrency,
	};

We need to change state of isDisabled on Change of state of all fields in WorkspaceSettingPage to enable button again.

onImageSelected={(file) => {

                Policy.updateWorkspaceAvatar(
                  lodashGet(this.props.policy, 'id', ''),
                  file,
                );
                this.setState({isDisabled: false});

}}

onInputChange={(currency) => {

                  this.setState({currency});
                  this.setState({isDisabled: false});

}}

onChangeText={(name) => {

                this.setState({name});
                this.setState({isDisabled: false});

}}

submit Function should look something like this by adding Keyboard.dismiss() and setting this.setState({isDisabled: true}).

submit() {

if (this.props.policy.isPolicyUpdating || !this.validate()) {
  return;
}
const name = this.state.name.trim();
const outputCurrency = this.state.currency;
Policy.updateGeneralSettings(this.props.policy.id, name, outputCurrency);
Keyboard.dismiss();
this.setState({isDisabled: true});

}

Simulator.Screen.Recording.-.iPhone.13.Pro.-.2022-09-27.at.02.02.50.mp4

[Luke9389]

@rushatgabhane I like the approach of refactoring to use Form.js 👍

[melvin-bot]

📣 @mollfpr You have been assigned to this job by @Luke9389!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[Luke9389]

My bad @mollfpr, didn't realize I needed to assign you!

[MitchExpensify]

@chauchausoup mind applying for the Upwork job for eventual reporting bonus?

[Luke9389]

@mollfpr is working on a PR. Not overdue.

[chauchausoup]

@MitchExpensify can't open the Upwork link.

[mallenexpensify]

@chauchausoup this should work for ya https://www.upwork.com/jobs/~014b51c853743c4959
The GH issue number and Expensify should always be in the job title.

[MitchExpensify]

Hired @chauchausoup, thanks for sharing the working link @mallenexpensify !

[melvin-bot]

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

• Refactor workspace settings #11615
• Refactor workspace settings #11615

If no regressions arise, payment will be issued on 2022-11-02. 🎊

[MitchExpensify]

Made a note to pay on 2022-11-02

[MitchExpensify]

Paid to all bar @mollfpr, just waiting on you to accept the offer! Thanks everyone

[mollfpr]

@MitchExpensify accepted, thanks!

[MitchExpensify]

Paid all, thanks again