<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Value of a color input does not update visually when using setAttribute"
href="https://bugs.webkit.org/show_bug.cgi?id=166930">166930</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Value of a color input does not update visually when using setAttribute
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari Technology Preview
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>macOS 10.12
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Forms
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>dvpdiner2@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>With an <input type="color">, if you set the value dynamically via setAttribute('value', '#ff0000') it still shows the input color visually as black rather than the updated value (red, in this case).
The actual value of the input is correct, and if you open the color picker then it shows the correct value selected.
Here's an example JSFiddle which starts out black and sets the value via setAttribute after 1.5 seconds: <a href="https://jsfiddle.net/1wLsa0jc/">https://jsfiddle.net/1wLsa0jc/</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>