Fix for issue #401. Preserve text selection on applicable inputs.

Test is currently failing.

dist/alpine-ie11.js

@@ -5995,11 +5995,13 @@
         updateSelect(el, value);
       } else {
         // Cursor position should be restored back to origin due to a safari bug
-        var cursorPosition = el.selectionStart;
+        var selectionStart = el.selectionStart;
+        var selectionEnd = el.selectionEnd;
+        var selectionDirection = el.selectionDirection;
         el.value = value;
 
-        if (el === document.activeElement) {
-          el.setSelectionRange(cursorPosition, cursorPosition);
+        if (el === document.activeElement && selectionStart !== null) {
+          el.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
         }
       }
     } else if (attrName === 'class') {

dist/alpine.js

@@ -558,11 +558,13 @@
         updateSelect(el, value);
       } else {
         // Cursor position should be restored back to origin due to a safari bug
-        const cursorPosition = el.selectionStart;
+        const selectionStart = el.selectionStart;
+        const selectionEnd = el.selectionEnd;
+        const selectionDirection = el.selectionDirection;
         el.value = value;
 
-        if (el === document.activeElement) {
-          el.setSelectionRange(cursorPosition, cursorPosition);
+        if (el === document.activeElement && selectionStart !== null) {
+          el.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
         }
       }
     } else if (attrName === 'class') {

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "alpinejs",
-    "version": "2.2.2",
+    "version": "2.3.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

src/directives/bind.js

@@ -44,10 +44,14 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             updateSelect(el, value)
         } else {
             // Cursor position should be restored back to origin due to a safari bug
-            const cursorPosition = el.selectionStart 
+            const selectionStart = el.selectionStart
+            const selectionEnd = el.selectionEnd
+            const selectionDirection = el.selectionDirection
+
             el.value = value
-            if(el === document.activeElement) { 
-                el.setSelectionRange(cursorPosition, cursorPosition)
+
+            if (el === document.activeElement && selectionStart !== null) {
+                el.setSelectionRange(selectionStart, selectionEnd, selectionDirection)
             }
         }
     } else if (attrName === 'class') {

test/bind.spec.js

@@ -372,6 +372,33 @@ test('classes are removed before being added', async () => {
     await wait(() => {
         expect(document.querySelector('span').classList.contains('block')).toBeFalsy()
         expect(document.querySelector('span').classList.contains('hidden')).toBeTruthy()
-        expect(document.querySelector('span').classList.contains('text-red')).toBeTruthy
+        expect(document.querySelector('span').classList.contains('text-red')).toBeTruthy()
+    })
+});
+
+test('cursor position is preserved on selectable text input', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ foo: 'bar' }">
+            <input type="text" 
+                   x-model="foo"
+                   x-ref="textInput" 
+                   @select="foo = 'baz'"
+            >
+        </div>
+    `
+
+    Alpine.start()
+
+    document.querySelector('input').setSelectionRange(0, 3, 'backward')
+    expect(document.querySelector('input').value).toEqual('bar')
+    expect(document.querySelector('input').selectionStart).toEqual(0)
+    expect(document.querySelector('input').selectionEnd).toEqual(3)
+    expect(document.querySelector('input').selectionDirection).toEqual('backward')
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('baz')
+        expect(document.querySelector('input').selectionStart).toEqual(0)
+        expect(document.querySelector('input').selectionEnd).toEqual(3)
+        expect(document.querySelector('input').selectionDirection).toEqual('backward')
     })
 })