I'm building a Chrome extension that layers over a 3rd party react website. I am attempting to update the value of a textarea within that app using the following code:
$('textarea').val("Text to go in textarea.");
The code successfully updates the textarea however once the user clicks on the textarea, the DOM seems to regenerate and the value becomes blank.
What is the best way to update the value within the textarea so that it remains even once the user clicks and DOM regenerates? I am not a react expert however my guess is that the textarea is tied to the state. Is there any way to update that from my own jquery within my chrome extension?
Just to be clear, the textarea belongs to a 3rd party website/react app that I have no control over. I'm trying to manipulate it from my own google chrome extension. I thought the easiest way would be to somehow simulate actual typing in order to make the react app think the user typed my input however I searched around and could not find a way to do that.
Expanding on #Panther's suggestion, you can set the value as you have done above and then trigger the onChange or keypress event etc to save the changes in either state or props. Now since React uses synthetic events , you need to trigger then as shown.
$('textarea').val("Text to go in textarea.");
$.each(document.getElementsByTagName("textarea"),(index,Element)=>{
let event = new Event("change"); // repeat for keypressup,down,input etc.
Element.dispatchEvent(event);
});
Try to use set value of DOM Html element:
document.getElementById("textarea").value = "Johnny Bravo";
Related
I'm making reusable Web Components containing shadow DOM and am currently having trouble with focus.
I have a component containing a native input and some text.
I'm trying to have the following working:
Calling .focus() on the component will focus its inner native input
Using the attribute tabindex works
Pressing "tab" does not focus the component, but rather its inner native input
Highlighting the text is allowed (using the mouse mousedown + drag)
Here are some things I tried:
https://codepen.io/Spirielle/pen/RwBwJNY
Initially I was using delegatesFocus on the component shadow DOM. It works well for focus and tab, but makes the text inside the component unselectable.
Then I tried to remove delegatesFocus and instead call the inner input focus method whenever focus was called on the component, but now I have to press tab twice when the attribute tabindex is set on the component.
Someone gave me a good-enough solution, so I thought I'd share :)
We bind on onfocus instead of focus
this.onfocus = opts => {
inner.focus(opts);
};
It's not perfect since we need to click twice in the text to highlight it, but otherwise all 4 mentioned use cases work.
I updated the codepen with this solution.
https://codepen.io/Spirielle/pen/RwBwJNY
Feel free to suggest something else or comment if something terrible could happen with this approach.
I'm trying to debug the integration between my app and Stripe's Elements component library. Everything works fine in sandbox mode, but we ran into a problem on production in the 3D Secure authentication process. This involves loading an iframe, into our app, that contains a form from the credit card's issuer (usually via a technology partner, like Arcot).
The form loads correctly and its buttons are working as expected, but the element (for a SMS one time code) is not behaving. Every time I click on the input, something is immediately pushing the focus back to the element of the iframe. This makes it impossible to type anything in, since by the time I touch a key, the input is not in focus. For reference, it is possible to change the input's value using document.getElementById('enterPIN').value = '123456';
I'm not sure if my app is triggering focus() calls (I don't think so) or if it is some part of the iframe code or even Stripe's. Is there a good way to monitor DOM events and do a stack trace for the trigger of each one?
I tried two tactics. Neither gave an obvious answer, but they did point my search in the right direction.
I opened the Event Listeners panel (in the Elements tab of my browser's developer tools) and removed everything I could find, but it seems that this doesn't actually change the behavior of the page- focus kept being stolen away. Luckily, I also noticed some listeners that were defined by the Material UI library.
I used monitorEvents() to get a few more details, but the src & target values were not much help and event.relatedTarget was always null.
In the end, I found this discussion and realized that my MUI Dialog component was stealing focus whenever I clicked on the iframe triggered by its content. This was easily fixed by adding the disableEnforceFocus attribute.
I'm trying to simulate an actual tab key press in JavaScript. I don't want to focus on the next element or anything like that, I just want to make it seem like the tab key has been pressed.
The reason why is because I am building a form JavaScript class where I want to be able to use the enter key just like tab. If someone is using a native BROWSER autocomplete, I need to fire the tab key to capture the selected autocomplete response. If I just move to the next input it won't capture their autocomplete selection and leave the field blank.
Any thoughts?
I don't think it's possible; an article about DOM events here ...mentions that firing an event doesn't trigger the default result of the user action, for security reasons; the script should not be able to simulate user interaction directly. You will have to simulate the behavior the keypress causes (such as focus on a field), instead of trying to actually simulate a keypress. You probably won't be able to interact with the browser's native autocomplete functionality, unless the browser explicitly provides a means for you to do so.
Edit:
See also: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete] (Autocomplete HTML attribute)
I'm using Chrome DevTools to inspect a React webapp. The app has an upload button with a hidden input field. I'm attempting to make the input field visible (and iteractable) in two different ways:
1) In the Elements tab, I find the input HTML tag and click on it. In the Styles panel on the right, I can see that the element has a CSS style applied to it, which sets "display: none!important;". When I uncheck this line in the Styles panel, the style gets disabled, and the input element shows up on the page (and I can click on it to open the file chooser). So far, all this makes sense to me.
2) In the Sources tab, I create a new snippet and I programmatically change the display style of the same element:
form = ...
input = form.getElementsByTagName('input')[0];
console.log(input);
computedStyle = getComputedStyle(input);
console.log(computedStyle['display']);
input.style.setProperty("display", "inline", "important")
console.log(computedStyle['display']);
When I run this, the console output makes sense: I confirm that I'm finding the correct element, the first time I print the display it's "none", and the second time it's "inline". However, nothing changes on the page, I don't see the input as in the other approach.
I'm still wrapping my head around React, and I suspect this is related to the fact that React can and will decide to recreate the actual DOM elements very often (so perhaps the input I'm changing is not the input I'm seeing?). But I'm not super clear, and either way, I was expecting these two approaches to have the same results. What happening here? And how can I programmatically change the hidden input to be not hidden?
You manipulate dom (in react) by changing props and state. There is a browser extension which let's you do that in browser. For chrome is here. There is extension for firefox as well.
I am guessing that your snippet change did not induce a React refresh, thus the shadow DOM was modified but React did not see a reason to update the DOM. Perhaps you could add a forceUpdate() in your snippet?
So, it appears that by calling $('#input').val('email#example').change(), it doesn't trigger the React input onChange event.
But this is really necessary for using something like CasperJS for integration testing (filling out a form and submitting, etc.).
So how to do this? I haven't been able to find a solution online or by trying various things in the browser and looking at the React Devtools value of the state.
Here are some related links, that aren't particularly helpful.
Why jQuery.val( value ) does not dispatch any event from the DOM element?
So, to enable the testing, I changed the input from being controlled to being a normal HTML input. For the onSubmit function, I use a ref to find the input value. Couldn't find a way to trigger onChange programmatically.