Blur problem with custom input

[sibstark]

Hello. I use react-day-picker with formik

        <DayPickerInput
          ref={ref => (this.datePicker = ref)}
          dayPickerProps={this.props}
          inputProps={{
            ...field,
            onBlur: this.onBlur,
            disabled,
            mask,
            clearable,
            onClear: this.onClear
          }}
          onDayChange={this.onDayChange}
          value={field.value}
          formatDate={formatDate}
          parseDate={parseDate}
          placeholder={placeholder}
          format={format}
          keepFocus={false}
        />

and if I use DayPickerInput without component prop then after "TAB" click it works fine, after DayPickerInput component, coursour jumps to next form item.

But if I use component prop with custom input

        <DayPickerInput
          ref={ref => (this.datePicker = ref)}
          dayPickerProps={this.props}
          inputProps={{
            ...field,
            onBlur: this.onBlur,
            disabled,
            mask,
            clearable,
            onClear: this.onClear
          }}
          onDayChange={this.onDayChange}
          value={field.value}
          formatDate={formatDate}
          parseDate={parseDate}
          placeholder={placeholder}
          format={format}
          component={(mask || clearable) && SimpleInput}
          keepFocus={false}
        />

Custom input

            <input
              value={mask ? conformToMask(value, mask, { guide: false }).conformedValue : (value || "")}
              placeholder={placeholder ? placeholder : ""}
              disabled={disabled}
              type={type || "text"}
              name={name || ""}
              autoFocus={autoFocus}
              ref={ref => this.getRef(ref)}
              accept={accept || ""}
              onChange={this.onChange}
              onFocus={onFocus && onFocus}
              onKeyUp={onKeyUp && onKeyUp}
              onClick={onClick && onClick}
              onBlur={onBlur && onBlur}
            />

It works bad, DayPickerInput calendar doesnt close after keyboard "Tab" click, it jumps to navigation between months and next. (see gif below)

How to fix it?

[jwm0]

The docs state that in order to keep the input focused:

the component class must have a focus method

Your custom input class needs a focus method that once called sets the focus on the element.

If you are using React 16.3+ then here's what you need to do:

1. Create a ref in a constructor:
   this.customInput = React.createRef()
2. Assign it to your input
   <input ref={this.customInput} />
3. Create a focus method like so:
   focus = () => this.customInput.current.focus()

If you are using an earlier version just do the same with lamba function
<input ref={node => this.customInput = node} />

Also, keepFocus prop should be set to true (it is by default)

[dasler-fw]

Look at my solution for it: https://stackoverflow.com/a/66755055/14374471