https://github.com/jonmagic/chrome-neighboring-forms-bug

https://github.com/jonmagic/chrome-neighboring-forms-bug

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jonmagic/chrome-neighboring-forms-bug
• Owner: jonmagic
• Created: 2016-11-01T17:07:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-01T17:07:59.000Z (over 9 years ago)
• Last Synced: 2025-06-29T05:34:22.501Z (10 months ago)
• Language: HTML
• Size: 166 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Chrome Neighboring Forms Bug

I found what appears to be a bug in Chrome 54, evident when inserting html that contains neighboring forms. In the following example I create a template element, set it's innerHTML to three forms each with their own input field, import the node, and then append it to a container div in the document. The javascript is pretty simple:

```javascript

var container = document.querySelector(".container")

var forms = ""

function prepareNode(html) {

  var template = document.createElement("template")

  template.innerHTML = html

  return document.importNode(template.content, true)

}

container.appendChild(prepareNode(forms))

```

### Safari handles this correctly.

![safari](safari.png)

### But Chrome nests the forms

![chrome](chrome.png)

### The solution

I figured out that nesting each `form` in a `div` will prevent the undesired behavior.