I’m having trouble with disabling an option in antd with Selects in a Form.
I want to have two Select components working off of the same list of options but without being able to choose the same option on both. To do this, I made a function, renderSelectItems, that gets the value chosen in the first dropdown and disables it for the second dropdown. Additionally, the first option should override the second option, so in the onChange of the first dropdown, if the value will equal the second, it will set the value of the second dropdown to undefined.
However, this isn’t happening. I think the problem is that renderSelectItems is not re-rendered upon the selection of the first dropdown.
I’ve set the dropdowns as dependencies of each other as well as set shouldUpdate to true, but neither are hitting the renderSelectItems call to enforce this disabling.
I’ve recreated this in codesandbox - https://codesandbox.io/s/sleepy-wing-nxpxr?file=/src/App.tsx
Related
I'm trying to do a automated flow using JS in Power automate, for form filling.
I'm struggling with the dropdowns that are on the website. Inspecting the elements, there is no values in the dropdown available, only when selecting them manually. I tried to run the following line
document.getElementById('type').value="EORI";
document.querySelectorAll('input[Id="type"]')[0].value="EORI";
When running this, it does insert the text EORI in the dropdown, but it isn't being stored, meaning that if I perform an action like save, the field is still marked as empty? Is there some way to add the value without having to change the website structure?
First image is without anything selected in the dropdown and secound image is when EORI is choosen in the dropdown. "EORI" is only the value, the name in the dropdown is "EORI number", not sure if it matters.
We are using selectize to load some options from some provider php classes, and it works perfectly when creating a new item.
When editing an existing one, we use php to set the value and the text of the element, and then when loading the form, one has to delete the text from the input to be able to see the other options. Is there anyway to see that the value is selected, but when clicking all options show up? The same way as in the creation, you select an option, it is selected, you click on the select, you view all options...
I'm very new to scripting stuff, but here's what I'm trying to do. When visiting a webpage, there are two dropdowns available, but the second is disabled until a selection is made in the first. The content of the second populates automatically as soon as something is selected in the first, and each option in the first leads to a unique set of options in the second. I'm attempting to automate selecting items in both. I can set a value in the first using "document.getElementById('firstDropdown').value = 'myValue'", and I can get the label of myValue to appear in the dropdown window, but I can't get the second dropdown to populate because it doesn't realize that I've made a selection since I'm not physically clicking on something. Is there a way to reload or refresh only secondDropdown (not the entire page) so that it realizes I have made a selection for firstDropdown and thus populate?
You can trigger change event of firstDropdown with below code using the Event Constructor.
document.getElementById('firstDropdown').dispatchEvent(new Event('change'));
I have a tampermonkey script I hacked together with some JavaScript, JQuery, and google-fu. It runs on a specific webpage where I enter some data.
The drop-down lists on this webpage are huge, but for the majority of them I only use a specific option (or few options). I am running into a problem when I need to change one of the values of the drop-down to something else, but it reverts back to the default option.
$(document).ready(()=>{
$("#MainContent_Lead").val('64');
$("#MainContent_Meeting").val('1');
$("#MainContent_Duration").val('30');
Line #2: The value set for lead is the only option I would ever select in that drop-down, it works great.
Line #3: For the next drop-down, I use val 1 about 90% of the time, so I want val 1 to be selected by default, but I also need to be able to change the value on occasion. Currently when I change it, it reverts back immediately.
Line #4: Strangely enough, the third drop-down is also something that I need to change frequently, but when I change the value it works as intended.
What do I need to do to set val 1 for #MainContent_Meeting by default, but allow me to change it when needed?
onFocus Called when focus
Here, I am using antd select Where i am using onFocus props which should actually be called whenever i clicked or open the select options. But it's not being called every time. What's the issue?
Actually i do have lot of select boxes in my project and i am using the same select box so whenever i focus the select boxes am fetching the particular selectbox options.
But since onFocus is not being called everytime I am facing issue.
Codesandbox notworking example
codesandbox Working example
onClick is not supported by Select. But the thing i needed is like onclick event so that everytime i click select box i want to fetch the data.
Here, I found the solution :
I can actually fetch data on
onDropdownVisibleChange
Thankyou #antdDesign.