[HOLD for payment 2022-05-24] [$1000] [HOLD for payment after regression testing] Refactor Picker to be compatible with Form

[luacmartins]

With the implementation of our new Form component we need to refactor Picker to be Form compatible. Here are the changes that need to be made:

1. An optional isFormInput prop.
2. If isFormInput is true, require a inputID prop. Use getInputIDPropTypes to enforce this propType rule.
3. Add an optional shouldSaveDraft prop. Defaults to false.
4. Make the value prop optional.
5. In the input’s onBlur method, call props.onBlur().
6. In the input’s onChange method (or equivalent e.g. onTextChange, etc), call props.onChange().
7. Remove the hasError prop.
8. Add an optional errorText prop. Defaults to an empty string.
9. Update the error message to display if errorText is truthy.
10. Update the inline error display style so it is left aligned with the label and input value. See example image for TextInput:
11. Make sure that props.ref is attached to the appropriate DOM node. This could involve forwarding the ref to a child component. This is important so we can call ref.focus().
12. Add the input to the test Form stories and make sure that it works. You can check this by running npm run storybook and testing the component in the example form.
13. Remove any unused code.

There's an example of a refactor to TextInput in this PR.

[luacmartins]

Seems like there's a potential fix here https://github.com/Expensify/App/pull/7955/files

[LucioChavezFuentes]

Guys, I found another issue, the library react-native-picker-select installs and use its own version of @react-native-picker/picker. That prevents the newer Picker version could be used through react-native-picker-select's RNPickerSelect. I found there is a pull request about that mattter, meanwhile I will check if that pull request could help us and search for workarounds.

[rushatgabhane]

@LucioChavezFuentes Great find, but no need to look for workarounds. We'd want the fix merged in rn-picker-select itself.

Worst case we have to fork them.

[rushatgabhane]

I'd suggest that you ask on slack as well, regarding what's the best way to move forward.

[LucioChavezFuentes]

I applied my final changes, I updated @react-native-picker/picker and removed the logic on index.native.js. I tested the changes of pull request on react-native-picker-select and I confirm that solution would fix the problem on RNPickerSelect of using an old version of @react-native-picker/picker so its merging will finish my issue on Picker ref. I am a little confuse about Slack, to whom should I ask how to move forward?

[LucioChavezFuentes]

Today I am available but I will be out for a week starting tomorrow. I apologize for the incoveninece this may arise.

[rushatgabhane]

Above comments addressed in the PR https://github.com/Expensify/App/pull/7807#discussion_r818083968

[laurenreidexpensify]

@LucioChavezFuentes are you still able to work on this? Please let us know if there is a PR up yet. Thanks

[rushatgabhane]

@laurenreidexpensify the PR is up - https://github.com/Expensify/App/pull/7807

But we're waiting on a third party dependency

[laurenreidexpensify]

Are we still waiting for the third party dependency?

[luacmartins]

No, that has been solved and the PR is currently in review!

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/7807
• https://github.com/Expensify/App/pull/7807

If no regressions arise, payment will be issued on 2022-04-20. :confetti_ball:

[laurenreidexpensify]

Will be issuing payment tomorrow

[luacmartins]

There was a regression on the PR and a temporary fix was deployed. We are still looking for a better permanent fix. Not sure if this changes the payment schedule or not.

[rushatgabhane]

The new payment date will be 7 days after a permanent fix for the regression has been in production.

[laurenreidexpensify]

Okay, will circle back to this for payment once that is on prod

[LucioChavezFuentes]

According to this info of Expensify Contributing. Could it be posible to increase the cost of this issue? The following actions took me time to figure out to progress on the issue:

1.- Create a pull request and wait to merge on Picker . 2.- Make Picker work in storybook first installing this add-on before start testing my changes. 3.- Point out the problem of RN-Picker-Select of using an old version of Picker, therefore the need to fork this library.

Thank you for your consideration.

[luacmartins]

@LucioChavezFuentes I think that's fair. May I ask what amount you would consider fair for the time invested on this issue?

[rushatgabhane]

While we're at it, comp for C+ should be $125 because I didn't have to do anything extra and there was one regression.

[LucioChavezFuentes]

Based on another issue I am working on with similiar difficulty, I think It would be an extra $750, making it a total of $1000.

[parasharrajat]

Another Regression: https://expensify.slack.com/archives/C01GTK53T8Q/p1650821915782839

[LucioChavezFuentes]

I found a solution to blur regression

We need to fire onClose along with onBlur.

class BasePicker extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedValue: this.props.defaultValue,
        };

        this.updateSelectedValueAndExecuteOnChange = this.updateSelectedValueAndExecuteOnChange.bind(this);
++   this.executeOnCloseAndOnBlur = this.executeOnCloseAndOnBlur.bind(this);
    }

    updateSelectedValueAndExecuteOnChange(value) {
        this.props.onInputChange(value);
        this.setState({selectedValue: value});
    }

++    executeOnCloseAndOnBlur() {
++       this.props.onClose();
++
++       if (this.props.onBlur) {
++            this.props.onBlur();
++        }
++    }

    render() {
        const hasError = !_.isEmpty(this.props.errorText);
        return (
            <RNPickerSelect
                onValueChange={this.updateSelectedValueAndExecuteOnChange}
                items={this.props.items}
                style={this.props.size === 'normal' ? basePickerStyles(this.props.disabled, hasError, this.props.focused) : styles.pickerSmall}
                useNativeAndroidPickerStyle={false}
                placeholder={this.props.placeholder}
                value={this.props.value || this.state.selectedValue}
                Icon={() => this.props.icon(this.props.size)}
                disabled={this.props.disabled}
                fixAndroidTouchableBug
                onOpen={this.props.onOpen}
                onClose={this.props.onClose}
                pickerProps={{
                    onFocus: this.props.onOpen,
--                 onBlur: this.props.onBlur,
++               onBlur: this.executeOnCloseAndOnBlur,
                    ref: this.props.innerRef,
                }}
            />
        );
    }
}

[rushatgabhane]

@LucioChavezFuentes feel free to raise a PR, and let's get it right this time :)

[LucioChavezFuentes]

@LucioChavezFuentes feel free to raise a PR, and let's get it right this time :)

Thank you, making PR.

[luacmartins]

Based on another issue I am working on with similiar difficulty, I think It would be an extra $750, making it a total of $1000.

I think this is fine given the additional work with react-native-picker-select.

[LucioChavezFuentes]

PR is up to fix this regression! Ready to be reviewed.

[rushatgabhane]

Sorry for the trouble, unassigning myself. I was slacking off for this issue, and I'm OOO till 14th May.

I've notified @stitesExpensify about it in the PR https://github.com/Expensify/App/pull/8765#issuecomment-1110034253 P.S. No c+ payment due

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

[melvin-bot[bot]]

Current assignee @stitesExpensify is eligible for the Exported assigner, not assigning anyone new.

[luacmartins]

@Santhosh-Sellavel assigning you as C+ for this issue, since @rushatgabhane is OOO. I also assigned you to the corresponding PR.

[kadiealexander]

Just noting for the record that @parasharrajat needs a reporting bonus for reporting the regression here. The regression issue is here, but we decided to use this issue to manage everything to avoid confusion.

cc: @laurenreidexpensify @stitesExpensify

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/8765

If no regressions arise, payment will be issued on 2022-05-24. :confetti_ball:

[LucioChavezFuentes]

I have a question, I requested a rise on cost to this issue to $1000 and it was accepted . Is it normal to still show $250 on the title?

[kadiealexander]

Ah, yes! That title doesn't update automatically. I've updated this to reflect the correct amount.

[Santhosh-Sellavel]

@laurenreidexpensify Can you set up a job on Upwork or send an invite for this issue! Its payment is due tomorrow. Thanks!

[laurenreidexpensify]

@Santhosh-Sellavel sent you a proposal, ignore the per hour bit - I'll issue payment as a bonus as soon as you accept today

[laurenreidexpensify]

@LucioChavezFuentes payment has been issued 👍🏽

[Santhosh-Sellavel]

Accepted the offer, @laurenreidexpensify!

[laurenreidexpensify]

Paid @Santhosh-Sellavel 🙌🏽

[parasharrajat]

@laurenreidexpensify I am eligible for a bonus here https://github.com/Expensify/App/issues/7535#issuecomment-1124323357.

[laurenreidexpensify]

Sorry @parasharrajat will sort you out now!

[laurenreidexpensify]

@parasharrajat created a new job here https://www.upwork.com/ab/applicants/1529457532430389248/job-details - I'll issue payment as soon as you're hired

[laurenreidexpensify]

@parasharrajat all done - sorry about that!