Manipulate React form over DevTools console - javascript

I've to fill some React forms on a website. Therefore, I've tried to write a JavaScript script to autofill the textareas to check the checkboxes and so on at the React forms by pasting the script into the Chrome Dev Tools console. Everything looks good first, but first the send button is still disabled and my input is not recognized or diapered.
With "normal" forms, this kind of injections works like a charm, but what do I've to do with react forms that react recognize the fields are filled?
Thank you!

With "normal" forms it works because it's directly to the DOM, and for React won't work because React uses VirtualDOM.
Can you try to modify your code to use useRef from React?
https://beta.reactjs.org/learn/manipulating-the-dom-with-refs

Related

Is tabbing behavior affected when used inside an iframe?

I'm currently attempting to tab through some react components that I've (text inputs, checkboxes, radio buttons, etc) implemented (using material-ui). Something I've discovered is that tabbing through my components locally works as expected but as soon as I put it on the server, it skips through my checkboxes & radiobuttons (but tabbing to text inputs works fine).
The website that I'm displaying my react project on is built on backbone and I'm basically displaying an iframe with my react project inside that. Is it possible that this has some effect on a user's ability to tab through the components inside an iframe?
Thanks for your help!
With some help from above, I was able to figure out that when I render my react project inside the backbone project, some components such as my checkbox and radio buttons are wrapped inside a <span> tag and in order for it to be able to be tabbed I had to add the tagIndex attribute to it. Thanks everyone!

Calling OA Page from custom JSP

I'm trying to launch a custom OAF page from a custom JSP. Although the OAF page is loading fine and functionality is also working correctly, but there is drastic change in the look and feel of the OAF page. FOr eg: Go/Clear buttons are displayed as rectangles. Also, for LOVInput fields, the Quick Select is coming as an hyperlink rather than Image that we see normally.
I'm using Oracle 11i and Jdev 9i.
I have registered my OAF page through AOL function, and calling using javascript from my custom JSP.
I have tried looking at various sites but mostly they deal with launching of OAF page (which i already have done).
https://community.oracle.com/thread/571687?start=0&tstart=0
https://community.oracle.com/thread/388873?start=15&tstart=0
My issue is with the difference in look and feel of the OAF page. It is working fine in JDev.
Image showing Go and QUick Select buttons
Fixed this issue by updating the profile option "Oracle Application Look and Feel" value at User/Responsibility level as "Browser Look and Feel".

React native, error adding a root view

I've been trying to use 'react-native-popup' in my project and rendering the popup gave me the below error in a red screen. If I reload, the message is treated like a warning and the app functions fine, but the error message shows up once in a while. I am wondering what the issue is?
Trying to add a root view with an explicit id already set. React Native uses the id field to track react tags and will overwrite this field. If that is fine, explicitly overwrite the id field to View.NO_ID before calling addMeasuredRootView.
This is how I used it in the render function:
<Popup ref={popup => this.popup = popup }/>
If you are getting something like the screenshot below , Please try reloading the app by tapping the reload button. I was getting this error if I made some changes in code that already had some exception/error. I hope this helps as it has worked for me almost every time.

insert value into input tag from chrome extension

I have written a chrome extension which can successfully insert value into input tags on many pages by simple jquery code
$("#myId").val('myvalue');`
except this page`
I have tried using javascript jquery but nothing works, Though chromes built in autofill and autofill extension can insert value efficiently.
From my chrome extension I want to insert value into these two input ID's "#loginEmailMobile" and "#clientpassword" . When I use .val() method it shows the value there but seems like floating. And don't work when I click on sign in. So how I can make it work? Please help.
The page is listening for keyboard events to update the UI as well, your method is only changing the .value property. If you want the page to "know" something changed, you should send a keyboard event to the inputs as well. The AutoFill extension seems to do this by calling someelement.dispatchEvent(new Event('input')) on the inputs, which seems to do the job.
Is the url permissions and schemes set for the website it is not working for?

How to deal with Firefox saved passwords when using React Controller Components?

I'm following the Controlled Components React pattern inside a login form in my application.
That does work fine when Chrome fills in the stored user/password, as it waits for the page to finish loading before filling the fields.
However, Firefox is stubborn and fills in the fields as soon as they appear: this is not enough to call onChange and thus, I can't get the field value inside the component's state.
What's the best way to deal with this behaviour?

Categories