Caret snaps to the end of input on first keyboard edit of a controlled datepicker

[aidando73]

I'm Submitting a ...

[ x ] Bug report
[ ] Feature request
[ ] Support request

Steps to Reproduce

For a controlled date picker:

1. Select a date
2. Select the text-based input
3. Move the caret to the middle of the input.
4. Hit backspace

Expected Results

Caret should remain in position

Actual Results

Caret moves to the back of the input

Minimal Reproduction of the Problem

This bug occurs with the following code snippet, attempted on version 3.1.1:

import React, { useState } from "react";
import "react-datetime/css/react-datetime.css";
import Datetime from "react-datetime";

export default function App() {
  const [datePickerValue, setDatePickerValue] = useState(undefined);
  return (
    <>
      <Datetime
        value={datePickerValue}
        onChange={(dateValue) => setDatePickerValue(dateValue)}
        input
      />
    </>
  );
}

Sandbox example

Other Information (e.g. stacktraces, related issues, suggestions how to fix)

• Does not occur when component is uncontrolled
• Does not occur on subsequent edits.
• Also occurs when adding a character
• Is also repeatable. If you undo the edit and make another edit, bug occurs.

[aidando73]

Cleaning up my issues - going to close this one. Let me know if you want it reopened