search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.63k stars 4.13k forks source link

Select options not click() selectable from within DOM #5628

Open MegaMech opened 1 year ago

MegaMech commented 1 year ago

I need to automate form data input, but I'm having issues finding a way to select an option with a react-select component. Browser extensions are not able to access react properties due to security sandboxing. As such only in dev tools can I use select->control->reactProps->...->setvalue().

Is it possible to fix the react-select bug that prevents e.click() from opening the drop-down list and then selecting one of the options also using e.click()?

rohit3345ksChicmic commented 1 year ago

I am also stuck on this issue. Can anybody please help with some solution?

rohit3345ksChicmic commented 1 year ago

cc: @JedWatson @gwyneplaine

rohit3345ksChicmic commented 1 year ago

I have found the solution. We need to dispatch mousedown event on the dropdown indicator in select to programmatically opening (with DOM usage) the menu and choosing the option.

Sample Code:

let dropdownIndicator = document.querySelector("div#react-select-container > div > div.react-select__indicators > div");
dropdownIndicator.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));

id is preferred over class for detection of element and bubbling of the event is important for menu to open.

rohit3345ksChicmic commented 1 year ago

@MegaMech , can you use JS for your use case?