Add Keyboard disable and autogrow functionality to TextInput component

[parasharrajat]

Details

• TextInputAutoWidthWithoutKeyboard This can be easily merged.

  Purpose of component

  1. Hide the main keyboard. We can have this functionality behind a prop.
  2. Auto shrink and expand based on the entered text. This will be added as another prop. Although currently, it exists as a single component I feel this behavior is completely different from point 1.

Fixed Issues

$ #6584

Tests | QA Steps

1. Verify that the Input design is not changed for the profile page.
2. Verify the same for a couple of other pages.
3. Verify the same for Multiline TextInput such as on Workspace invite member page.
4. Verify that you are able to do the following on IOUAmount page:
   a. Focus on input and cursor is shown.
   b. Height and font styles are not changed.
   c. Input is functioning correctly as before.
   d. Keyboard does not show up on focusing on the amount input.
5. Input auto grow and shrink as usual.

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Desktop

Mobile Web

iOS

Android

[rushatgabhane]

Overall, looks good to me and tests well.
Just some style changes.

[rushatgabhane]

LGTM! 🎉
All yours @puneetlath

[parasharrajat]

@puneetlath Any thoughts?

[parasharrajat]

@puneetlath Waiting for your review.

[puneetlath]

Sorry for the delay. It looks good to me! Looks like you have one merge conflict.

And before I merge, I just want to confirm - @parasharrajat @rushatgabhane both of you have tested on all platforms?

[rushatgabhane]

I'll test once again after the merge conflicts have been resolved.

[parasharrajat]

I will retest it and attach screenshots for all for visibility.

[parasharrajat]

Updated screens and conflict resolved.

[puneetlath]

Great. @rushatgabhane have you tested as well?

[rushatgabhane]

Sorry for the delay. Placeholder color looks wrong for IOUAmountPage

@parasharrajat

[rushatgabhane]

Hmm, this is werid. Validation for IOUAmount isn't working anymore. I can input letters.
main is working fine.

@parasharrajat can you merge main again to see if gets fixed?

[parasharrajat]

I will update this by tomorrow. Sorry for delay.

[parasharrajat]

Here is what I am planning on to fix the issue.

    componentDidUpdate() {
        // activate or deactivate the label when value is changed programmatically from outside
        if (this.value === this.props.value) {
            return;
        }

        this.value = this.props.value;
        this.input.setNativeProps({text: this.value});

        if (this.props.value) {
            this.activateLabel();
        } else if (!this.state.isFocused) {
            this.deactivateLabel();
        }
    }

Explanation:

1. TextInput implementation is incorrect. When the parent component modifies the values the TextInput is not updated properly. There are a couple of issues (unreported) for this.

   1. When the user typed acids.
   2. On the Consumer(parent component) we blocked the update of value as we are only accepting numbers. So value will be ''.
   3. Now on the TextInput the this.value === acids but this.props.value === '' and also the prevProps.value would be '' thus componentDidupdate will early return.
   4. but the text input will keep acids as this.value is still acids.

So I have moved the check to if (this.value === this.props.value) { from if (prevProps.value === this.props.value) {
Then as the component does not use state, I used this.input.setNativeProps({text: this.value}); to update the value. Which keeps it uncontrolled.
Last important part is to use the defaultValue instead of value on TextInput.

Pushing the changes for @rushatgabhane to test. Please test some other inputs in our app. I don't think anything is breaking but just to be sure.

[rushatgabhane]

Not a blocker: Comment should start with a captial letter 😅

[rushatgabhane]

Thanks so much for the detailed and simple explanation @parasharrajat 👏

@puneetlath Looks great, and tests well on all platforms.

[parasharrajat]

@rushatgabhane Have you tested some other inputs in our app just to make sure it does not break anything? I have tested but another set of eyes is helpful.

[rushatgabhane]

@parasharrajat Yep, I've tested all types of inputs throughout the app twice. Nothing is broken

[puneetlath]

Just one question from me @parasharrajat. Almost ready to merge!

[parasharrajat]

Gentle bump @puneetlath. Let's merge this so that I can proceed to the next milestone.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[parasharrajat]

I think I incorrectly refactored a small recent change while merging main. It does not create any issue but I will correct that in my next PR.

[luacmartins]

I think this PR may have caused a regression when using TextInput as a form input. I now see the error below in the default Form story in Storybook:

@parasharrajat would you mind taking a look?

[parasharrajat]

Sure @luacmartins. I will and I also have a small change to be made. I will create the PR asap.

[OSBotify]

🚀 Deployed to staging by @puneetlath in version: 1.1.39-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @timszot in version: 1.1.39-3 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅