How to access the select box options via a Userscript? #5739
Replies: 4 comments
-
3: Is not having options accessible in DOM a feature of React-Select? Why? |
Beta Was this translation helpful? Give feedback.
-
Please do respond to this thread even if it is months old without answers, I am checking for answers every single day and is actively looking for solutions on how to work with React-select from a userscript/DOM perspective. |
Beta Was this translation helpful? Give feedback.
-
Checking every day. If you worked on or with this extension I'm sure you are able to help me perform one of the simplest tasks known to javascript (select an option from a selectbox) :). |
Beta Was this translation helpful? Give feedback.
-
Ran into the same issue with this library, and from what I can tell, this library doesn't have any type of vanilla ("non-react") HTML or JS integration support kept in mind for developers to hook into and programmatically set values, so I had to hack my way around it. Keep in mind that the following code is not stable and will probably break the moment the library pushes an update, so don't use this in production or hands-off situations. First, here's a way to open a menu, and to write in the select box: const changeSelectInput = function (element, value) {
const reactPropsKey = Object.keys(element).find(str => str.startsWith("__reactProps"))
const selectProps = element[reactPropsKey].children[1].props.selectProps;
selectProps.onMenuOpen();
selectProps.onInputChange(value, {
"action": "input-change",
"prevInputValue": ""
});
}; Then here's how I hooked it up to get it to work. The element you want to use as the select (if you look at the element inspector) is the parent of the waitForElementToDisplay("#root div.title-select", titleSelect => {
changeSelectInput(titleSelect, "Foo bar");
// Query the DOM for an existing option (if any), and select it when it exactly matches the one we intended.
const found = Array.from(document.querySelectorAll("div.title-select .react-select__menu-list > div")).find(el => el.innerText === "Foo bar")
if (found) {
found.click();
}
}); Note the const waitForElementToDisplay = function (selector, callback, checkFrequencyInMs, timeoutInMs) {
var startTimeInMs = Date.now();
(function loopSearch() {
if (document.querySelector(selector) != null) {
callback(document.querySelector(selector));
return;
} else {
setTimeout(function () {
if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
return;
loopSearch();
}, checkFrequencyInMs);
}
})();
} |
Beta Was this translation helpful? Give feedback.
-
1: The React-select select box is not accessible via .click()
2: The React-select select box options are not visible in DOM
How can I select a specific option (that I know the innerText of) programmatically without any inputs from the user?
Example situation here (select "Handy" with a userscript): https://codesandbox.io/s/react-select-template-13zf3?file=/src/App.js
Search keywords: Tampermonkey, Greasemonkey
Beta Was this translation helpful? Give feedback.
All reactions