Is it possible to use JS to set the value of a React + downshift autocomplete dropdown?

[PythonMillionaire]

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.

• 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
• Both focusing on the input itself and not

FORM ELEMENT HTML

<div id="ember3412" class="ember-view">
    <!---->
    <div data-garden-id="forms.field" data-garden-version="8.74.3" data-test-id="ticket-form-field-dropdown-field-29533817" aria-describedby="7val-tooltip_1.0.6" data-garden-container-id="containers.tooltip" data-garden-container-version="1.0.6" class="sc-anv20o-3 gAALKx StyledField-sc-12gzfsu-0 glOpOr">
        <label data-garden-id=["forms.input_label"](http:) data-garden-version="8.74.3" data-garden-container-id="containers.tooltip" data-garden-container-version="1.0.6" id="downshift-5-label" for="downshift-5-input" tabindex="0" aria-describedby="8val-tooltip_1.0.6"
        class="sc-anv20o-4 iIWDoF StyledLabel-sc-2utmsz-0 bYrRLL">HO Assignee*</label>
        <div data-garden-id="dropdowns.faux_input" data-garden-version="8.54.3" aria-invalid="false" aria-disabled="false" aria-haspopup="listbox" data-toggle="true" aria-expanded="false" aria-labelledby="downshift-5-label" data-test-id="ticket-form-field-dropdown-button"
        class="StyledTextInput-sc-k12n8x-0 sc-anv20o-0 kptXaI StyledFauxInput-sc-1l592ed-0 iJWzSI StyledTextFauxInput-sc-yqw7j9-0 gdXore">
            <div data-garden-id=["dropdowns.select"](http:) data-garden-version="8.54.3" class="StyledSelect-sc-xifmwj-0 eSliJF"><span class="sc-anv20o-1 hGMRMW"><div data-garden-id="typography.ellipsis" data-garden-version="8.74.0" title="-" class="StyledEllipsis-sc-1u4uqmy-0 gxcmGf">-</div></span></div>
            <input data-garden-id=["dropdowns.input"](http:) data-garden-version="8.54.3"
            aria-invalid="false" data-garden-container-id=["containers.field.input"](http:) data-garden-container-version="3.0.15" id="downshift-5-input" aria-labelledby="downshift-5-label" aria-autocomplete="list" autocomplete="off" role="combobox" class="StyledInput-sc-hzhvmp-0 etSNgg StyledTextInput-sc-k12n8x-0 jEqqcP"
            value="">
            <svg xmlns="[http://www.w3.org/2000/svg"](http://www.w3.org/2000/svg) width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.media_figure" data-garden-version="8.74.3" class="StyledTextMediaFigure-sc-1qepknj-0 lnDzQq">
                <path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path>
            </svg>
        </div>
    </div>
</div>

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:

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

[silviuaavram]

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.

https://www.downshift-js.com/use-combobox#controlling-state

More info on how to control a prop:

https://github.com/downshift-js/downshift?tab=readme-ov-file#control-props