Move noscript blocks out of paragraph - deface breaks such invalid html #1789
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I ran across this issue when I added an override to the spree/checkout/_address view.
Simply by virtue of adding a deface override to that view (irrespective of what you're overriding), the resulting html renders in such a way that it breaks checkout.js, which is responsible for showing/hiding the state field of the billing and shipping addresses based on whether or not a country has states configured.
This results in the state picker not properly converting to a text input when the user's chosen country does not have states configured for it.
I tracked down the cause to invalid html in the view itself. Evidently, deface's processing "corrects" the invalid html, causing the output to no longer have the structure that the selector in checkout.js expect, so the functions defined there never get called.
The offending tag is the noscript block that lies in the paragraph that houses the state select/input field. According to the html4 dtd, noscript is a block-level element (unlike
<script>) which cannot be placed inside a paragraph because paragraphs can only contain inline elements.Because of this, the deface processing adds a closing
</p>, moving the paragraph contents outside of the paragraph and the checkout.js selector's p#bstate/sstate.The simplest fix is to move the noscript block outside and below the paragraph. I've tested this and it works both when the browser supports javascript as well as when javascript is turned off.