React selector is not working without .withProps methods

[vvedachalam]

The ReactSelector issue is, when I use eact component name with .withProps, it is working but if I use only react component name, then it is not working.

The below code works
const INDUSTRYDROPDOWN = ReactSelector('SelectInput').withProps('name', 'industry');
the below code doesnot work
const INDUSTRYDROPDOWN = ReactSelector('SelectInput');
There is only one SelectInput field

I am using TestCafe with Cucumber-js with Typescript.

Page.ts Code:
import { Selector } from 'testcafe'
import { testController } from '../../support/testControllerHolder'
import { waitForReact, ReactSelector } from 'testcafe-react-selectors';

const INDUSTRYDROPDOWN = ReactSelector('SelectInput');

getIndustry(){
    return INDUSTRYDROPDOWN.with({ boundTestRun: testController });
}

.........

pageStep.ts
Given(/^I access mandate form$/, async () => {
await testController.navigateTo(signuppage.getSignUpURL());
}
Then(/^I can see Industry field$/, async () => {
await testController
.expect(signuppage.getIndustry().visible).ok();
}

............

form.feature
Scenario: Mandate Form is filled successfully
Given I access mandate form
Then I can see Industry field

If you change the react selector with .withProps
const INDUSTRYDROPDOWN = ReactSelector('SelectInput').withProps('name', 'industry');
then it works fine. There is only one 'SelectInput' field

[vvedachalam]

UPDATE:
If I use .findReact('dom-ele') , theen it works fine

getIndustry(){
return INDUSTRYDROPDOWN.findReact('div').with({ boundTestRun: testController });
}

However, this complicates the locator selection. So if we can fix the issue, it will be great.
NOTE: getReact() has got the same issue too

[kirovboris]

The .withProps('name', 'industry') method in

ReactSelector('SelectInput').withProps('name', 'industry')

internally uses the same mechanism as ReactSelector does. So it's currently difficult to determine the reason of that behavior.
A simple working example would be very helpful.
Also, please note that ReactSelector looks for the root dom node for a react component. If you use .findReact, it looks for a nested dom node. So check for visibility can give a different result in some cases, e.g., if a parent component is a position:fixed element.

[kirovboris]

I will close the issue because no activity has been encountered for a long time. Feel free to reopen the issue if the problem persists and you can provide an example to reproduce it.

[vvedachalam]

@kirovboris The advantage of using reactSelector is the elimination of complex locator usage.

Here I can navigate to surname easily by using React Selector
ReactSelector('ReactSurName') rather using ReactSelector('ReactSurName').findReact('div')

Hope this will give more insight on the prob

[AndreyBelym]

Likely it's a bug in ReactSelector caused by ReactSelector's internal functions that can't correctly handle the DOM tree of your page. Could you please provide a sample page to reproduce the issue?