Losing focus on input when using a Bootstrap input label

[barrychapman]

Describe the issue and the actual behavior

When entering text in the field, the field immediately clears, and loses focus - suspecting rerender. I am using function based components

Describe the expected behavior

Not lose focus, and update accordingly

Provide a CodeSandbox link illustrating the issue

https://codesandbox.io/s/crimson-https-zqvd27?file=/src/App.js

• type in the input box, nothing happens / loses focus

Provide steps to reproduce this issue

type in box, observe

Please check the browsers where the issue is seen

• Chrome
• Chrome (Android)
• Safari (OSX)
• Safari (iOS)
• Firefox
• Firefox (Android)

[s-yadav]

The problem is your are passing inline function on customInput, customInput accepts a Component reference (note it's not a render prop), here you are passing new component reference every time it rerenders. This makes it umount and remount CustomInput every time it renders loosing focus and state.

customInput={() => (
            <CustomInput
              labelClass={labelClass}
              placeHolder={placeHolder}
              maxlength={maxlength}
              selfOnChange={selfOnChange}
              value={value}
              isValid={isValid}
            />
          )

All the additional props are forwarded to customInput. so you don't need to create an inline function instead can do.

<PatternFormat
          format={mask}
          allowEmptyFormatting={false}
          mask={""}
          labelClass={labelClass}
          placeHolder={placeHolder}
          maxlength={maxlength}
          selfOnChange={selfOnChange}
          value={value}
          isValid={isValid}
          customInput={CustomInput}
        />

Here's an updated sandbox. https://codesandbox.io/s/compassionate-gates-nlz37j

[s-yadav]

I will also add this note in the doc to avoid future confusion.