Angular2 testing directive with dynamically added DOM

I have an attribute directive that adds hidden input after host element and displays it when clicked on host element, it also hide it when input lose focus (blur event). It is basically used to edit values of some models without need to create forms/inputs for every single field.

Code: Plunker

I have a problem with 1 test case:

• click on host element should clear inline display style
• blur should set display style to none

it('should display input when clicked and hide on blur', () => {
  i.click();
  fixture.detectChanges();
  expect(input.style.display).not.toBe('none');
  input.blur();
  fixture.detectChanges();
  expect(input.style.display).toBe('none');
});

While running karma locally this test sometimes passes and sometimes fails, it fills like .blur() have some async behavior. I tried with fakeAsync and tick but with no luck.