Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

autocorrect="off" is ignored in iOS Safari for elements rendered with Preact

See original GitHub issue

Steps to reproduce:

Save the test file, which will create three text boxes with autocorrect="off":
- Directly, in HTML
- By building and appending a DOM node with the document API
- By using Preact to generate and render a node
Host the test file, for instance with python -m SimpleHTTPServer
Visit the page on an iPhone on your local network ($yourIP:8000)
Type daf and then space in to each textbox

Expected behavior:

In each text box, daf appears and is not autocorrected

Actual behavior:

In the plain HTML text box, daf is not autocorrected (correct behavior)
In the document API-generated text box, daf is not autocorrected (correct behavior)
In the Preact-rendered text box, daf is autocorrected to dad (incorrect behavior)

Notes: The test case also console.logs the autocorrect property of each node, and in my console, they’re all correctly shown as off. This is despite the fact that the Preact text box doesn’t behave as if autocorrect is set to "off".

When we inspect the DOM nodes, all three look the same. Even looking at attributes with the document API, we can’t tell any difference. As far as we can tell, all three of these are exactly the same. For some reason, though, Safari doesn’t respect the autocomplete setting of the node generated by Preact.

We’ve tested this on two iPhone 8s, running iOS versions 12.1 and 12.1.1.

We have anecdotal reports of Android working correctly from users, but I don’t know which browser they were running.

Thank you!

Test case:

<html>
  <body>
    <input class="inputHTML" type="text" autocorrect="off" />
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.4.2/preact.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var node = document.createElement('input')
      node.setAttribute("type", "text");
      node.setAttribute("autocorrect", "off");
      node.setAttribute("class", "inputInserted");
      document.body.appendChild(node)
    })
  </script>
  <script>
    Foo = () => preact.h("input", {class:"inputPreact", type:"text", autocorrect:"off"})
    document.addEventListener("DOMContentLoaded", function() {
      preact.render(preact.h(Foo, {}), document.querySelector('body'))
    })
  </script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      console.log(document.querySelector(".inputHTML").getAttribute("autocorrect"))
      console.log(document.querySelector(".inputInserted").getAttribute("autocorrect"))
      console.log(document.querySelector(".inputPreact").getAttribute("autocorrect"))
    })
  </script>
</html>

Issue Analytics

State:
Created 5 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

developitcommented, Dec 21, 2018

@litonico no, there are no plans to change this behaviour - it’s one of the reasons Preact remains small and one of the ways we ensure interoperability with Web Components.

In this case it’s a Safari-specific bugfix, and the best solution here is that Safari fix their bug. In all other browsers, the canonical lowercased versions (the property names) are preferable.

0reactions

litonicocommented, Dec 22, 2018

Fair enough! Thanks again.