8000 Error while handling range element in react app · Issue #2173 · getgauge/taiko · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error while handling range element in react app #2173

Closed
arijit91 opened this issue Jul 2, 2021 · 5 comments · Fixed by #2377
Closed

Error while handling range element in react app #2173

arijit91 opened this issue Jul 2, 2021 · 5 comments · Fixed by #2377
Assignees
@lethaldose
Labels
bug help wanted

Comments

@arijit91
Copy link
arijit91 commented Jul 2, 2021 •
edited
Loading

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:
Screenshot 2021-07-02 at 3 52 00 PM

Taiko run:
Screenshot 2021-07-02 at 3 52 09 PM

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

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

@aishwarya-g-thoughtworks
Copy link

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
Copy link
Contributor

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 8000 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
Copy link
Member
zabil commented Oct 19, 2021

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

@NivedhaSenthil
Copy link
Member

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

This was referenced Oct 21, 2021
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lethaldose lethaldose

Labels
bug help wanted
Milestone
No milestone
5 participants
@zabil @lethaldose @arijit91 @NivedhaSenthil @aishwarya-g-thoughtworks
0