Merge pull request #424 from muzafferdede/bind-value-if-changed

Using Vue way to fix cursor bug on Safari

dist/alpine-ie11.js

@@ -5988,17 +5988,8 @@
         }
       } else if (el.tagName === 'SELECT') {
         updateSelect(el, value);
-      } else if (el.type === 'text') {
-        // 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);
-        }
       } else {
+        if (el.value === value) return;
         el.value = value;
       }
     } else if (attrName === 'class') {

dist/alpine.js

@@ -551,17 +551,8 @@
         }
       } else if (el.tagName === 'SELECT') {
         updateSelect(el, value);
-      } else if (el.type === 'text') {
-        // 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);
-        }
       } else {
+        if (el.value === value) return;
         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

@@ -42,18 +42,9 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             }
         } else if (el.tagName === 'SELECT') {
             updateSelect(el, value)
-        } else if (el.type === 'text') {
-            // 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)
-            }
         } else {
+            if (el.value === value) return
+
             el.value = value
         }
     } else if (attrName === 'class') {

test/bind.spec.js

@@ -1,5 +1,5 @@
 import Alpine from 'alpinejs'
-import { fireEvent, wait } from '@testing-library/dom'
+import { wait } from '@testing-library/dom'
 
 global.MutationObserver = class {
     observe() {}
@@ -376,51 +376,6 @@ 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 () => {
-    document.body.innerHTML = `
-        <div x-data="{ foo: 'bar' }">
-            <input type="hidden" x-model="foo">
-        </div>
-    `
-
-    Alpine.start()
-
-    fireEvent.input(document.querySelector('input'), { target: { value: 'baz' } })
-
-    await wait(() => {
-        expect(document.querySelector('input').value).toEqual('baz')
-    })
-})
-
 test('extra whitespace in class binding object syntax is ignored', async () => {
     document.body.innerHTML = `
         <div x-data>