Using Vue way to fix cursor bug on Safari

dist/alpine-ie11.js

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

dist/alpine.js

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

package-lock.json

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

src/directives/bind.js

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

test/bind.spec.js

@@ -376,36 +376,7 @@ test('classes are removed before being added', async () => {
     })
 });
 
-test('cursor position is preserved on selectable text input', async () => {
-    document.body.innerHTML = `
-        <div x-data="{ foo: 'bar' }">
-            <input type="text" x-model="foo" @select="foo = 'baz'">
-        </div>
-    `
-
-    Alpine.start()
-
-    document.querySelector('input').focus()
-
-    expect(document.querySelector('input').value).toEqual('bar')
-    expect(document.querySelector('input').selectionStart).toEqual(0)
-    expect(document.querySelector('input').selectionEnd).toEqual(0)
-    expect(document.querySelector('input').selectionDirection).toEqual('none')
-
-    document.querySelector('input').setSelectionRange(0, 3, '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')
-    })
-})
-
-// input elements that are not 'text', 'search', 'url', 'password' types
-// will throw an exception when calling their setSelectionRange() method
-// see issues #401 #404 #405
-test('setSelectionRange is not called for inapplicable input types', async () => {
+test('value bindings to hidden inputs', async () => {
     document.body.innerHTML = `
         <div x-data="{ foo: 'bar' }">
             <input type="hidden" x-model="foo">