Unable to type text in a "Type to search dropdown" which is a react component using testcafe

Question

Unable to type text in a "Type to search dropdown" which is a react component. I am able to click on the component but unable to type any text in it. Below is the sample code.

import { Selector } from 'testcafe';

test('Select option', async t => {

    const dropdown = Selector('.section')
                .find('.Select.is-clearable.is-searchable.Select--multi')
                .find('.Select-control')
                .find('.Select-placeholder')
                .withText('Select...');

    await t.click(dropdown);
    await t.typeText(dropdown, 'abc'); // unable to pass text 'abc'
    await t.wait(3000);
});

Sample site which is using a similar component http://jedwatson.github.io/react-select/

Answer 1

const dropdown = Selector('.section')
            .find('.Select.is-clearable.is-searchable.Select--multi')
            .find('.Select-control')
            .find('.Select-placeholder')
            .withText('Select...');

const inputField = dropdown
    .sibling('.Select-input')
    .find('input');

await t
    // wait until element is visible on the screen
    .expect(dropdown.with({visibilityCheck: true}).exists).ok({timeout: 5000})
    // access the element via the mouse (will fire the mouse event onMouseEnter)
    .hover(dropdown)
    .click(dropdown)
    .typeText(inputField, 'abc');