HOC Component : Cannot read property 'getBoundingClientRect' of null

[vaibhavsah]

I am rendering a text field, Email as an Higher Order Component (HOC) in a redux-form. It has the React Tooltip attached with it for showing errors. The weird thing is that there are 2 forms with this Email field. In one form, there are other text fields too. In other form, there is only one Email field. Now, the issue is as soon as I click inside this email field, I get a console error,

The error is generating from the React Tooltip code, as far as my understanding.
Here is the code of my component:
Email Field
emailField = ({ input, meta, ...props }) => { const emailError: string = props.required ? this.props.formErrors.emailError : ''; const hasError = emailError !== ''; return ( <TextInput name="cof-email" error={hasError ? emailError : ''} showLabel={true} labelCss="col-form-label" labelValue="Email" placeholder="Email" {...input} /> ); };

TextInput Component

<div className={form-group ${error ? 'has-error' : ''}}> {showLabel && label} <input type={type} id={inputId} name={name} className={controlClass} placeholder={placeholder} maxLength={maxLength as any} value={value} onChange={onChange} data-event="focus" data-event-off="blur" data-tip={error} onBlur={onBlur} /> <ReactTooltip place="top" type="error" effect="solid" /> </div>

Call to Email field rendering, conditional if the condition is true

{this.props.checkCondition && <Field name="email" component={this.emailField} required={this.props.required} />}

What can be the reason of this error? One more weird thing is that on first load of this form, there is no error. It comes only when I transition from other form to this form.

[janardhanc]

Same issue