You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Sorry, I'm a newb and thought this was a downshift-related thing when it's actually React's thing.
Hi everyone!
Please excuse me, I'm not certain whether you guys allow requests for help by people who are simply trying to use downshift in some way other than contributing to its development or reporting issues. If not, feel free to mercilessly send this post into oblivion.
OBJECTIVE
I'm a support agent trying to create a Chrome Extension to automate the filling out of Zendesk forms to make my job easier. I'm using the console at the moment.
SITUATION
Unfortunately, Zendesk uses React + downshift, which is complicating things as I am a newb at React and never used downshift. When I try to do it using normal means like changing the .value property and then dispatching events, the value change never registers.
WHAT I'VE TRIED
First of all, I simulate a click on the outer container, which opens the dropdown as expected.
Different combinations of dispatched events like first input, then change
Typing in the text by using keydown events to input the letters one by one
Using the blur event
Simulating a click on the actual input itself after the first simulated click on the parent
The actual input element itself is the one indicated by the arrow:
CODE
I've tried many, many things but this is the first thing I tried:
function insertText(parent, text, selectorDescription) {
if (!parent) {
console.error('Parent not found for ${selectorDescription}');
return;
}
let element = parent.querySelector('input');
if (!element) {
console.error('Input field not found for ${selectorDescription}');
return;
}
element.click(); // tried with and without
element.focus(); // tried with and without
element.value = text;
element.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
element.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
}
What am I doing wrong? What is the correct approach in this context?
Thank you all so much for the help! ❤️
NOTE: Backticks removed from the code so as to avoid problems with GitHub's markdown
The text was updated successfully, but these errors were encountered:
Not sure I understand what you try to do. Probably you want to setInputValue if you need to imperatively set the input value of the input in a way downshift is aware about it. If you use useCombobox. For Downshift this is not available. But for both the component and the hook you can control the inputValue directly and do whatever you want.
Here's how to control selectedItem as reference. You can do something similar with inputValue.
SOLVED: https://stackoverflow.com/questions/40894637/how-to-programmatically-fill-input-elements-built-with-react#:~:text=reproduced%20here%20for%20convenience%3A
Sorry, I'm a newb and thought this was a downshift-related thing when it's actually React's thing.
Hi everyone!
Please excuse me, I'm not certain whether you guys allow requests for help by people who are simply trying to use downshift in some way other than contributing to its development or reporting issues. If not, feel free to mercilessly send this post into oblivion.
OBJECTIVE
I'm a support agent trying to create a Chrome Extension to automate the filling out of Zendesk forms to make my job easier. I'm using the console at the moment.
SITUATION
Unfortunately, Zendesk uses React + downshift, which is complicating things as I am a newb at React and never used downshift. When I try to do it using normal means like changing the .value property and then dispatching events, the value change never registers.
WHAT I'VE TRIED
First of all, I simulate a click on the outer container, which opens the dropdown as expected.
FORM ELEMENT HTML
REACT DEV TOOLS HIERARCHY
The actual input element itself is the one indicated by the arrow:
CODE
I've tried many, many things but this is the first thing I tried:
What am I doing wrong? What is the correct approach in this context?
Thank you all so much for the help! ❤️
NOTE: Backticks removed from the code so as to avoid problems with GitHub's markdown
The text was updated successfully, but these errors were encountered: