The typeText action does not work with the DevExtreme Lookup search field

[Dmitry-Ostashev]

What is your Test Scenario?

I need to type text into the dxLookup search field to find a particular item.

What is the Current behavior?

The search field loses focus and stays empty.
This happens because TestCafe emulates the 'blur' event after the 'focus' event when the event target is not focusable.

What is the Expected behavior?

The required text should be entered into the search field.

What is your web application and your TestCafe test code?

Your website URL (or attach your complete example):
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Basics/jQuery/Light/

Your complete test code (or attach your test files):

 import { Selector } from 'testcafe';

fixture `Devextreme`
    .page `https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Basics/jQuery/Light/`;

test('Test 1', async t => {
    await t
        .switchToIframe(Selector('#demoFrame'))
        .expect(Selector('.dx-lookup-field-wrapper').exists).ok({
            timeout: 30000
        })
        .click(Selector('.dx-lookup-field-wrapper').find('div').withText('John Heart'))
        .click(Selector('.dx-texteditor-input'))
        .typeText(Selector('.dx-texteditor-input'), 'Billy')
        .expect(Selector('.dx-lookup-field-wrapper').find('div').withText('Billy').visible).ok();
});

Steps to Reproduce:

Run the test

Your Environment details:

• testcafe version: 1.6.1
• node.js version: v10.16.0
• command-line arguments: testcafe chrome test3.js
• browser name and version: Chrome 78
• platform and version: Win10
• other:

[Dmitry-Ostashev]

I reproduced this issue with the testcafe-hammerhead playground:

[Dmitry-Ostashev]

https://supportcenter.devexpress.com/internal/ticket/details/T988517

[wentwrong]

Fixed in DevExpress/testcafe-hammerhead#2635