<p dir="auto">When trying to embed a Video you can use the <source> HTML tag. For some reason if you put the muted attribute on it, it won't stick to the DOM, which doesn't allow videos to autoplay what makes it difficult with privacy settings of a couple of browsers like Safari on IOS. So here is a proof. I noticed it after a couple of tests on IOS. For me the muted tag wasn't important for playing videos on Chrome. On IOS the video just autoplays when the muted-tag is set.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/50872737/128626265-f11a09b5-514c-4928-a152-c6abd1db7fb5.jpg"><img src="https://user-images.githubusercontent.com/50872737/128626265-f11a09b5-514c-4928-a152-c6abd1db7fb5.jpg" alt="IMG_20210808_103818" style="max-width: 100%;"></a></p>
<p dir="auto">--&gt;<br>
My research has shown that the bug has existed since 2016.</p>
<p dir="auto">Fix just for now but not practically:<br>
let’s use dangerouslySetInnerHtml to ensure the muted attribute is written to the DOM:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/50872737/128626324-630b6a88-ffbf-4c1a-aa3a-99b3561c485e.png"><img src="https://user-images.githubusercontent.com/50872737/128626324-630b6a88-ffbf-4c1a-aa3a-99b3561c485e.png" alt="1_hewat2uh6MghJvBcQoyLmA (1)" style="max-width: 100%;"></a></p>
<p dir="auto">React version: 16.12.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Have a form with controlled input (i.e. value is set through <code class="notranslate">onChange</code> handler)</li>
<li>Type <code class="notranslate">cheese</code> into the input</li>
<li>Submit the form</li>
<li>Reload the page</li>
<li>Focus the input, type <code class="notranslate">c</code></li>
<li><code class="notranslate">cheese</code> is <em>not</em> suggested</li>
</ol>
<p dir="auto"><a href="https://codesandbox.io/s/ancient-currying-oqgt6" rel="nofollow">https://codesandbox.io/s/ancient-currying-oqgt6</a></p>
<p dir="auto">It works when a uncontrolled input is used (i.e. value is not set by react <code class="notranslate">onChange</code> handler)</p>
<ol dir="auto">
<li>Have a form with uncontrolled input</li>
<li>Type <code class="notranslate">cheese</code> into the input</li>
<li>Submit the form</li>
<li>Reload the page</li>
<li>Focus the input, type <code class="notranslate">c</code></li>
<li><code class="notranslate">cheese</code> is being suggested</li>
</ol>
<p dir="auto"><a href="https://codesandbox.io/s/naughty-dijkstra-p3n42" rel="nofollow">https://codesandbox.io/s/naughty-dijkstra-p3n42</a></p>
<p dir="auto">It's not about autofilling address data or passwords, but data previously filled in by the user.<br>
We noticed this issue in Chrome, Firefox and Safari. Even though we could not get any autocompletion to work in Safari, even without React. (We could in Chrome and Firefox)</p>
<p dir="auto">Thanks!</p>