Bug 166690 – Setting value of generated <input> programatically does not remove the placeholder text

• Component: Forms
• Status: RESOLVED WORKSFORME

Created attachment 298037 [details]
Test Case + Fix

Setting input.value on an <input> field does not reliably redraw if it has placeholder text when that <input> has been generated programatically. This leads to situations where the input.value is displayed *on top of* the placeholder text.

Steps to reproduce:

1) Generate a new <input> via javascript
2) Assign this <input> a placeholder attribute
3) Append <input> to the document.body
4) Set the value of the <input> (w/timeout as this won't happen immediately)
5) Notice that the input.value is displayed on top of the placeholder

The workaround is to toggle input.readOnly on/off again while setting input.value (see attached).

Created attachment 298038 [details]
GIF of Issue

Note: This issue is most easily reproduced when the web inspector is open.

[Jayden Irwin]

This issue occurs with <input>s not created by javascript too. I'm on Safari TP 29.

[Ahmad Saleem]

I am not able to reproduce this in WebKit ToT using attached test case.

[Karl Dubost]

This report was done for Safari 10. 
and it is not happening for me in Safari 17. 
It has been probably fixed along the way, but I don't know when. 

Closing as WORKSFORME