I am using datePicker from antd library and form also from antd.
If I set a field value it does not change in the onChange function. Without defining the field value beforehand everything is ok (onChange2 in codesandbox).
What can be the reason of that?
I prepared sandbox: https://codesandbox.io/s/magical-gould-9yppt
Related
How to clear the mui-chips in Material UI Autocomplete TextField on changing the value in another field. In the below example, I am trying to clear subtype value whenever Type value is getting changed. I am able to update the drop-down options based on value changed in the Type field. But the mui chips are not getting cleared.
options for Banking Type
In the below screenshot, I am trying to clear the options and mui-chips for the subtype field. Only the Options are getting updated, but mui-chips are not getting cleared.
mui chips not gettig reset, on changing Type drop-down value
Issue reproducible in below codesandbox link:
https://codesandbox.io/s/autocomplete-multiple-wkumx
Got the answer from oliviertassinari from github.
Working solution is available at below link:
https://codesandbox.io/s/autocomplete-multiple-forked-onu5n?file=/src/demo.js:0-2437
I have an input text field, which value is stored in "app.adress" component in Vue. I'm now using "Easy-autocomplete" plugin, which displays a list of suggested values. When I click one it appears in the text field, but is not saved in "app.adress" component. For example, I type "uni", I click suggested value "United Kingdom", it appears in the text field, but only "uni" is saved in the "app.adress". Any suggestions how to update Vue component by click?
I know this answer is too late. But I just want to share my work around on this issue. Instead of using v-model to bind the value of my input, I just add #change event listener and call a method that will update my data.
Edit: Other solution is to use the event functions of EasyAutocomplete like the onChooseEvent.
I have a simple hidden input field in my React Redux-Form and the value of the field is set by some Google Tag Manager code that basically does document.getElementById('gtm_field').value = 'some value'
The onchange event never gets fired and therefore the value of the form field never gets set in my Redux store. What is the recommended way to approach this problem? Note that I can modify the GTM code that is added to the page do trigger HTML element events, but it has to be added 'outside' the context of my React app.
Is there a simple way to set the value of a redux-form input field from 'external' JS?
You should use the function change() in redux-form props, it could change the value of a field in the Redux store. The usage like this:
handleChange() {
this.props.change(field:String, value:any)
}
anyone know how to create a callback on html input's value change, or someone know how to test clicking on jquery ui datepicker and timepicker? I have tried, onchange does not work == , the value I'm talking about is the value HTML attribute of the input element, and the element is a readonly element. I'm facing this problem because I'm setting the value of the element for capybara testing with execute script running jQuery and the date input is a react component, datepicker function mounted on to the element on oncomponentdidmounted callback, with datepicker function's onSelect callback changing the state of the page. I have tried to use xpath to click but that also does not work accordingly. I have tried page.execute_script aswell but it does not help.
page.execute_script("$($('.start-datepicker.hasDatepicker')[0]).val('23/11/2016');")
page.execute_script("$($('.start-timepicker.hasTimepicker')[0]).val('07:25 AM');")
page.execute_script("$($('.end-datepicker.hasDatepicker')[0]).val('24/11/2016');")
page.execute_script("$($('.end-timepicker.hasTimepicker')[0]).val('08:25 AM');")
I have more than 1 date picker on one page.
I am using Reactjs with bootstrap, it has an input field of text which use bootstrap-datepicker to choose date.
After I choose a date, the value of the input field is not stored, so the state of reactjs component cannot be changed. I didn't see a change in the dom's value, text or anything, so where is this value changed and why reactjs cannot detect the change?
I am using an input and javascript to load the picker:
$('.date-input').datepicker();
Thanks.
I haven't personally used bootstrap for my development, but generally the content of the input box is stored in two ways when it comes to react.
defaultValue
value.
If you provide a defaultValue and dont assign a onChange function to it then the input box will be a readOnly textbox.
To change the content of the input box provide a onChange event where you set the content state of the input box. In this way you can change the value inside the input box.
So from the looks of it in your case, set the state of the input box component from your datepicker to change the value of the input box component.