From 719ea4adbd9b536184ac3d826780afb7467dd98f Mon Sep 17 00:00:00 2001 From: Steffen Deusch Date: Sat, 17 Feb 2024 13:48:08 +0100 Subject: [PATCH] use document.activeElement, copy select value --- assets/js/phoenix_live_view/dom_patch.js | 7 ++----- assets/js/phoenix_live_view/live_socket.js | 22 +--------------------- assets/test/live_socket_test.js | 13 +------------ 3 files changed, 4 insertions(+), 38 deletions(-) diff --git a/assets/js/phoenix_live_view/dom_patch.js b/assets/js/phoenix_live_view/dom_patch.js index e8700565f2..97ef35dd82 100644 --- a/assets/js/phoenix_live_view/dom_patch.js +++ b/assets/js/phoenix_live_view/dom_patch.js @@ -411,11 +411,8 @@ export default class DOMPatch { if(!(fromEl instanceof HTMLSelectElement) || fromEl.multiple){ return false } if(fromEl.options.length !== toEl.options.length){ return true } - let fromSelected = fromEl.selectedOptions[0] - let toSelected = toEl.selectedOptions[0] - if(fromSelected && fromSelected.hasAttribute("selected")){ - toSelected.setAttribute("selected", fromSelected.getAttribute("selected")) - } + // keep the current value + toEl.value = fromEl.value // in general we have to be very careful with using isEqualNode as it does not a reliable // DOM tree equality check, but for selection attributes and options it works fine diff --git a/assets/js/phoenix_live_view/live_socket.js b/assets/js/phoenix_live_view/live_socket.js index 65f8cb2d3c..310cfb0ad1 100644 --- a/assets/js/phoenix_live_view/live_socket.js +++ b/assets/js/phoenix_live_view/live_socket.js @@ -476,25 +476,8 @@ export default class LiveSocket { } } - setActiveElement(target){ - if(this.activeElement === target){ return } - this.activeElement = target - let cancel = () => { - if(target === this.activeElement){ this.activeElement = null } - target.removeEventListener("mouseup", this) - target.removeEventListener("touchend", this) - } - target.addEventListener("mouseup", cancel) - target.addEventListener("touchend", cancel) - } - getActiveElement(){ - if(document.activeElement === document.body){ - return this.activeElement || document.activeElement - } else { - // document.activeElement can be null in Internet Explorer 11 - return document.activeElement || document.body - } + return document.activeElement } dropActiveElement(view){ @@ -877,9 +860,6 @@ export default class LiveSocket { this.debounce(input, e, type, () => { this.withinOwners(dispatcher, view => { DOM.putPrivate(input, PHX_HAS_FOCUSED, true) - if(!DOM.isTextualInput(input)){ - this.setActiveElement(input) - } JS.exec("change", phxEvent, view, input, ["push", {_target: e.target.name, dispatcher: dispatcher}]) }) }) diff --git a/assets/test/live_socket_test.js b/assets/test/live_socket_test.js index 0c8998ee84..909175f16c 100644 --- a/assets/test/live_socket_test.js +++ b/assets/test/live_socket_test.js @@ -167,17 +167,6 @@ describe("LiveSocket", () => { expect(liveSocket.getActiveElement()).toEqual(input) }) - test("setActiveElement and getActiveElement", async () => { - let liveSocket = new LiveSocket("/live", Socket) - - let input = document.querySelector("input") - - // .activeElement - liveSocket.setActiveElement(input) - expect(liveSocket.activeElement).toEqual(input) - expect(liveSocket.getActiveElement()).toEqual(input) - }) - test("blurActiveElement", async () => { let liveSocket = new LiveSocket("/live", Socket) @@ -215,7 +204,7 @@ describe("LiveSocket", () => { liveSocket.connect() let input = document.querySelector("input") - liveSocket.setActiveElement(input) + input.focus() liveSocket.blurActiveElement() expect(liveSocket.prevActive).toEqual(input)