Error while handling range element in react app

[arijit91]

Describe the bug
While selecting a range value in a react app, it appears that the event handlers are not being triggered correctly

To Reproduce
Deployed a sample app to demonstrate the behaviour https://cocky-noether-e87ec6.netlify.app/

Sign up button is enabled only if the age threshold is met. Taiko is able to set the age correctly for the range but the button does not get enabled. It works for a manual run.

I think a similar issue affects timefield and checkbox element types as well

const { openBrowser, goto, range } = require('taiko');
> openBrowser()
 ✔ Browser opened
> goto("https://cocky-noether-e87ec6.netlify.app/")
 ✔ Navigated to URL https://cocky-noether-e87ec6.netlify.app/
> range("Age").select(50)
 ✔ Selected value 50 for the given input value 50

Expected behavior
Button should be enabled for the above set of commands.

Screenshots
Manual run:

Taiko run:

Additional context
Maybe related to https://coryrylan.com/blog/trigger-input-updates-with-react-controlled-inputs

[NivedhaSenthil]

Thanks for reporting with a sample, managed to replicate will take a look

[aishwarya-g-thoughtworks]

There is a workaround for this issue. Please use the following steps:

openBrowser()
goto("https://cocky-noether-e87ec6.netlify.app/")
mouseAction($("#range1"),'press', {x:100,y:10})

You can change the values of x and y as appropriate to the application.

[lethaldose]

Hi,

I am planning to work on this issue. I have done some investigation. It is a known issue because of how reactjs overwrites prototype of every element for value setter and getter, to track DOM changes. So as a result the change in element's value is reflected but dom is not refreshed/re-rendered by react after firing events.

there is also a suggested solution for handling this issue here. i tried the fix and it works.

i am thinking of adding the approach mentioned in above issue as a function in in base Element class, which can then be injected as a browser global function ( runtimeHandler.runtimeEvaluate) by the Range element. This is so that this function call is available for setRange when it is evaluated by runtimeHandler. The same approach can then be used by Checkbox or Radio element as well.

let me know if it sounds ok

[zabil]

@NivedhaSenthil Hope this approach is ok. This is a react specific issue, but the injected code should work for everything.

[NivedhaSenthil]

yes this approach looks fine 👍 Hope the tests cover other cases to safely make this change