browser not rendering a font before the textbox is clicked

Question

So I have a text box which is modified via jQuery/angularjs and alghough the text field .text() changes and the text is displayed in Dev Tools, the text does not appear.

Only when I click on the text box and then click somewhere else does the text appear. Interesting thing is that the 'Rendered fonts' section appears only after the click -> click somewhere else scenario has happened.

I'm on windows 8.1 using Chrome 48

EDIT: This is not Chrome specific. The same behaviour is on latest Firefox. What would be a possible cause for a bug? What I do not get is why does clicking on the textbox and then clicking somewhere else trigger rendering of the font