Skip to content

Commit

Permalink
revert tracking forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@SteffenDE
SteffenDE committed Feb 2, 2024
1 parent cc37c1c commit 796fa16
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 97 deletions.
26 changes: 12 additions & 14 deletions assets/js/phoenix_live_view/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ let DOM = {
}
},

maybeHideFeedback(container, forms, phxFeedbackFor, phxFeedbackGroup){
maybeHideFeedback(container, inputs, phxFeedbackFor, phxFeedbackGroup){
let feedbacks = []
// if there are multiple inputs with the same name
// (for example the default checkbox renders a hidden input as well)
Expand All @@ -301,19 +301,17 @@ let DOM = {
// an entry in this object will be true if NO input in the group has been focused yet
let feedbackGroups = {}

forms.forEach(form => {
Array.from(form.elements).forEach(input => {
const group = input.getAttribute(phxFeedbackGroup)
// initialize the group to true if it doesn't exist
if(group && !(group in feedbackGroups)){ feedbackGroups[group] = true }
// initialize the focused state to false if it doesn't exist
if(!(input.name in inputNamesFocused)){ inputNamesFocused[input.name] = false }
if(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED)){
inputNamesFocused[input.name] = true
// the input was focused, therefore the group will NOT get phx-no-feedback
if(group){ feedbackGroups[group] = false }
}
})
inputs.forEach(input => {
const group = input.getAttribute(phxFeedbackGroup)
// initialize the group to true if it doesn't exist
if(group && !(group in feedbackGroups)) feedbackGroups[group] = true
// initialize the focused state to false if it doesn't exist
if(!(input.name in inputNamesFocused)) inputNamesFocused[input.name] = false
if(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED)){
inputNamesFocused[input.name] = true
// the input was focused, therefore the group will NOT get phx-no-feedback
if(group) feedbackGroups[group] = false
}
})

for(const [name, focused] of Object.entries(inputNamesFocused)){
Expand Down
18 changes: 9 additions & 9 deletions assets/js/phoenix_live_view/dom_patch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default class DOMPatch {
let phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM)
let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION)
let added = []
let trackedForms = new Set()
let trackedInputs = []
let updates = []
let appendPrependUpdates = []

Expand Down Expand Up @@ -188,7 +188,7 @@ export default class DOMPatch {
}

if(el.getAttribute && el.getAttribute("name") && DOM.isFormInput(el)){
trackedForms.add(el.form)
trackedInputs.push(el)
}
// nested view handling
if((DOM.isPhxChild(el) && view.ownsElement(el)) || DOM.isPhxSticky(el) && view.ownsElement(el.parentNode)){
Expand Down Expand Up @@ -221,8 +221,8 @@ export default class DOMPatch {
if(this.skipCIDSibling(toEl)){
// track inputs for applying phx-no-feedback, even if an element and
// its children are skipped
DOM.all(fromEl, "form", (form) => trackedForms.add(form))
if(fromEl.tagName === "FORM") trackedForms.add(fromEl)
DOM.all(fromEl, "form", (form) => Array.from(form.elements).forEach(el => trackedInputs.push(el)))
if(fromEl.tagName === "FORM") trackedInputs.push(fromEl)
// if this is a live component used in a stream, we may need to reorder it
this.maybeReOrderStream(fromEl)
return false
Expand Down Expand Up @@ -267,7 +267,7 @@ export default class DOMPatch {
DOM.syncAttrsToProps(fromEl)
updates.push(fromEl)
DOM.applyStickyOperations(fromEl)
trackedForms.add(fromEl.form)
trackedInputs.push(fromEl)
return false
} else {
// blur focused select if it changed so native UI is updated (ie safari won't update visible options)
Expand All @@ -279,7 +279,7 @@ export default class DOMPatch {
DOM.syncAttrsToProps(toEl)
DOM.applyStickyOperations(toEl)
if(toEl.getAttribute("name") && DOM.isFormInput(toEl)){
trackedForms.add(toEl.form)
trackedInputs.push(toEl)
}
this.trackBefore("updated", fromEl, toEl)
return true
Expand All @@ -296,7 +296,7 @@ export default class DOMPatch {
})
}

DOM.maybeHideFeedback(targetContainer, trackedForms, phxFeedbackFor, phxFeedbackGroup)
DOM.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor, phxFeedbackGroup)

liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
DOM.dispatchEvent(document, "phx:update")
Expand Down Expand Up @@ -355,10 +355,10 @@ export default class DOMPatch {
maybeReOrderStream(el, isNew){
let {ref, streamAt, reset} = this.getStreamInsert(el)
if(streamAt === undefined){ return }

// we need to set the PHX_STREAM_REF here as well as addChild is invoked only for parents
this.setStreamRef(el, ref)

if(!reset && !isNew){
// we only reorder if the element is new or it's a stream reset
return
Expand Down
42 changes: 20 additions & 22 deletions priv/static/phoenix_live_view.cjs.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions priv/static/phoenix_live_view.cjs.js.map
View file

Large diffs are not rendered by default.

42 changes: 20 additions & 22 deletions priv/static/phoenix_live_view.esm.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions priv/static/phoenix_live_view.esm.js.map
View file

Large diffs are not rendered by default.

42 changes: 20 additions & 22 deletions priv/static/phoenix_live_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,26 +573,21 @@ var LiveView = (() => {
el.setAttribute("data-phx-hook", "Phoenix.InfiniteScroll");
}
},
maybeHideFeedback(container, forms, phxFeedbackFor, phxFeedbackGroup) {
maybeHideFeedback(container, inputs, phxFeedbackFor, phxFeedbackGroup) {
let feedbacks = [];
let inputNamesFocused = {};
let feedbackGroups = {};
forms.forEach((form) => {
Array.from(form.elements).forEach((input) => {
const group = input.getAttribute(phxFeedbackGroup);
if (group && !(group in feedbackGroups)) {
feedbackGroups[group] = true;
}
if (!(input.name in inputNamesFocused)) {
inputNamesFocused[input.name] = false;
}
if (this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED)) {
inputNamesFocused[input.name] = true;
if (group) {
feedbackGroups[group] = false;
}
}
});
inputs.forEach((input) => {
const group = input.getAttribute(phxFeedbackGroup);
if (group && !(group in feedbackGroups))
feedbackGroups[group] = true;
if (!(input.name in inputNamesFocused))
inputNamesFocused[input.name] = false;
if (this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED)) {
inputNamesFocused[input.name] = true;
if (group)
feedbackGroups[group] = false;
}
});
for (const [name, focused] of Object.entries(inputNamesFocused)) {
if (!focused) {
Expand Down Expand Up @@ -1907,7 +1902,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
let phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM);
let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION);
let added = [];
let trackedForms = new Set();
let trackedInputs = [];
let updates = [];
let appendPrependUpdates = [];
let externalFormTriggered = null;
Expand Down Expand Up @@ -1994,7 +1989,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
externalFormTriggered = el;
}
if (el.getAttribute && el.getAttribute("name") && dom_default.isFormInput(el)) {
trackedForms.add(el.form);
trackedInputs.push(el);
}
if (dom_default.isPhxChild(el) && view.ownsElement(el) || dom_default.isPhxSticky(el) && view.ownsElement(el.parentNode)) {
this.trackAfter("phxChildAdded", el);
Expand Down Expand Up @@ -2028,6 +2023,9 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
dom_default.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom);
dom_default.cleanChildNodes(toEl, phxUpdate);
if (this.skipCIDSibling(toEl)) {
dom_default.all(fromEl, "form", (form) => Array.from(form.elements).forEach((el) => trackedInputs.push(el)));
if (fromEl.tagName === "FORM")
trackedInputs.push(fromEl);
this.maybeReOrderStream(fromEl);
return false;
}
Expand Down Expand Up @@ -2071,7 +2069,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
dom_default.syncAttrsToProps(fromEl);
updates.push(fromEl);
dom_default.applyStickyOperations(fromEl);
trackedForms.add(fromEl.form);
trackedInputs.push(fromEl);
return false;
} else {
if (focusedSelectChanged) {
Expand All @@ -2083,7 +2081,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
dom_default.syncAttrsToProps(toEl);
dom_default.applyStickyOperations(toEl);
if (toEl.getAttribute("name") && dom_default.isFormInput(toEl)) {
trackedForms.add(toEl.form);
trackedInputs.push(toEl);
}
this.trackBefore("updated", fromEl, toEl);
return true;
Expand All @@ -2099,7 +2097,7 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
appendPrependUpdates.forEach((update) => update.perform());
});
}
dom_default.maybeHideFeedback(targetContainer, trackedForms, phxFeedbackFor, phxFeedbackGroup);
dom_default.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor, phxFeedbackGroup);
liveSocket.silenceEvents(() => dom_default.restoreFocus(focused, selectionStart, selectionEnd));
dom_default.dispatchEvent(document, "phx:update");
added.forEach((el) => this.trackAfter("added", el));
Expand Down
Loading

0 comments on commit 796fa16

Please sign in to comment.