Fix #2612: unexpected behaviour of the cursor

When inserting a non valid character in the middle of a pattern,
the cursor instantly jumps to the end of the word,
instead of staying in that position.
Added also some case tests.

Author: rodasarede

components/dash-core-components/src/components/Input.react.js

@@ -184,16 +184,23 @@ export default class Input extends PureComponent {
 
     onChange() {
         const {debounce} = this.props;
-        if (debounce) {
-            if (Number.isFinite(debounce)) {
-                this.debounceEvent(debounce);
-            }
-            if (this.props.type !== 'number') {
-                this.setState({value: this.input.current.value});
+        const input = this.input.current;
+        const cursorPosition = input.selectionStart;
+        const currentValue = input.value;
+        this.setState({value: currentValue}, () => {
+            if (debounce) {
+                if (Number.isFinite(debounce)) {
+                    this.debounceEvent(debounce);
+                }
+                if (this.props.type !== 'number') {
+                    setTimeout(() => {
+                        input.setSelectionRange(cursorPosition, cursorPosition);
+                    }, 0);
+                }
+            } else {
+                this.onEvent();
             }
-        } else {
-            this.onEvent();
-        }
+        });
     }
 }
 

components/dash-core-components/tests/integration/input/test_input_basics.py

@@ -103,3 +103,72 @@ def test_inbs003_styles_are_scoped(dash_dcc):
     dash_outline_css = dash_input.value_of_css_property("outline")
 
     assert external_outline_css != dash_outline_css
+
+@pytest.mark.parametrize(
+    "initial_text, invalid_char, cursor_position_before, expected_text, expected_cursor_position",
+    [
+        ("abcdddef", "/", 2, "ab/cdddef", 3),
+        ("abcdef", "$", 2, "ab$cdef", 3),
+        ("abcdef", "$", 3, "abc$def", 4),
+        ("abcdef", "A", 4, "abcdAef", 5),  # valid character
+    ],
+)
+def test_inbs004_cursor_position_on_invalid_input(
+    dash_dcc,
+    initial_text,
+    invalid_char,
+    cursor_position_before,
+    expected_text,
+    expected_cursor_position,
+):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Input(
+                id="test-input",
+                type="text",
+                placeholder="File name",
+                className="create_file_input",
+                pattern="[a-zA-Z_][a-zA-Z0-9_]*",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    dash_dcc.start_server(app)
+    input_elem = dash_dcc.find_element("#test-input")
+
+    input_elem.send_keys(initial_text)
+    assert (
+        input_elem.get_attribute("value") == initial_text
+    ), "Initial text should match"
+
+    dash_dcc.driver.execute_script(
+        f"""
+        var elem = arguments[0];
+        elem.setSelectionRange({cursor_position_before}, {cursor_position_before});
+        elem.focus();
+    """,
+        input_elem,
+    )
+
+    input_elem.send_keys(invalid_char)
+
+    assert (
+        input_elem.get_attribute("value") == expected_text
+    ), f"Input should be {expected_text}"
+
+    cursor_position = dash_dcc.driver.execute_script(
+        """
+        var elem = arguments[0];
+        return elem.selectionStart;
+    """,
+        input_elem,
+    )
+
+    assert (
+        cursor_position == expected_cursor_position
+    ), f"Cursor should be at position {expected_cursor_position}"
+
+    assert dash_dcc.get_logs() == []