I have no idea how to fix this thing
have been spent more than an hours to solve this problem
but none of the solution fix this
So i have a combo box (Select tag element) which i would like to change the value when a modal box is opened.
I have already implement defaultValue to set the value of the combobox but it won't change. However on other input such as the notes / amount it can get the defaultValue and set it to the element.
I have try to debug the this.currState.deposit_type_id and i get the right value
But in fact it won't change
it always refer to the default value
I have made several type of this thing but none of them has ever had this bug
Here's the screenshot for the code and the image
This is the code to pass the data from parent's component, and deposit type for all the value i will put on the combo box
This is the code that i used for set the default value when the modal box is opened
This is the result, it supposed to choose "Kas Besar", yet it choose "Deposit Type" instead
Not sure as I am not able to try it now but you could try to add your value argument for input's html like this:
value={ this.state.currData && this.state.currData.deposit_type_id }
But it would be better to get currData from props. So this.props.currData.
Related
Using twitter's typeahead library https://twitter.github.io, if you attempt to update an inputs value with javascript (or jQuery), the value is reset to its original value when the input is selected, and then you click away.
See this gif below
https://gfycat.com/tautsphericalirishdraughthorse
As you can see the typeahead form (with id team2) first contains the string randomstring
When updated with $("#team2").val("test") the change can be seen in the input, but when you select the input and then click away it resets.
Values only seem to persist if you select the box and type in the value.
I need a way where I can alter the value through a js command.
I am working on a network graph editor with an inspector view on the right side.
The inspector is a separate web component built with Lit.
When I click on a node I would like to be able to view and change properties of the node, like the node title, in the inspector view. That works well as long as I don't change any value in the input field. Once I changed the value the input field keeps it's manual value even if set a new value during re-rendering.
To provide an example. This is how the web inspector of Safari shows the HTML element:
If I now change the node value it looks like this:
Now, I change to the second node I get this:
As you can see, the value attribute changed, even the id is different. However, Safari (and Chrome), keep the existing value, hence showing me the wrong title for the second node.
The input field shows the node's value each time, as long as I don't change the value manually. After that the input field maintains the manually set value.
The corresponding line in render() is
<input id="text_${this.currentElement.id}" value="${this.currentElement.text}"/>
I specifically change the id but that has no impact on the result.
What do I need to do in order to 'loose' the manual value during re-rendering? Many thanks in advance!
You should use .value to bind to value property.
<input id="text_${this.currentElement.id}" .value="${this.currentElement.text}"/>
You could read more on property-expressions.
I am trying to use the VueJs Select component (https://vue-select.org) but what I want to achieve is having the user to write an option on the input field that is not on the presented defaulted options.
When I write into the text field it shows no results, and the handler of selected option tells me that the value is null, why is that?
Here is my v-select:
<v-select :options="sortingOptions" v-model="sortingDefinition" taggable #input="setSelected" :multiple="false"></v-select>
I passed taggable as property because it tells on the documentation the following:
To allow input that's not present within the options, set the taggable prop to true. (https://vue-select.org/guide/values.html#tagging)
Then when I start typing something and end, then stop the focus on the input (dropdown) field, the following function is not triggered with the new value that I typed why?
setSelected(value){
console.log('value: ', value);
},
Any thoughts?
Thanks
I have to press Enter after typing the option I want, didn't know about this, I thought losing focus would be enough.
I have a project that has a list of stuffs using ReactJS, please see JSBIN, and want to search these stuffs with keyword.
TEST: input mi in search box to search ID, the this.state.data is filtered right but input value don't update right(gary should not appear).
I've checked the problem is input component
<input type="text" defaultValue={this.props.data.userid} ref="userid" disabled name="userid" />
with defaultValue for the fist time render, but upcoming render don't change it's value again; But if changed it to value, it's cannot be edited
Question: how to make search right also make all input editable with minimum code modify?
Your JSBin gives me strange output (and in a language I do not understand).
However, it looks like your problem is inside handleChange(), which is inside your Forms component. If you want the content of the page to update, there should be a this.setState function somewhere inside handleChange. In current setup, handleChange() only does console.log, but does not re-render..
So I have a combobox list populated with icons then a small description. Originally when I would select one item it would then put the html into the display as a raw value. Obviously having RAW html in the display wasn't what i wanted so i tried stripping the image tag and using the other information as the raw value.
This worked for display but the display and the value are different. (using a hiddenName field etc) and setting the raw value not only updates the display field but also updates the value. This is not acceptable.
On selecting an item I parse out the image tag and would like to ONLY update the display field. The problem here is there is no method i can find to ONLY update the display field and leave the hidden value alone.
How can i update the display field without messing with the hidden value field?
Update: I tried this....so close but no cigar...
select: function() {
console.log(this.el.dom.value);
this.el.dom.value = 'test';
}
This updated the display field to be 'test' but then for some magical reason when i click off of the combobox it sets my hidden value equal to my display value....any ideas?
Update 2: I have also tried suspending all events on the combobox by putting this.suspendEvents() at the end of the select listener....still no go. I cannot for the life of me figure out why the hidden value gets changed upon box blur. I have tried returning false in blue and change listener events.....preventDefault has no effect.
if you take a look at this link:
http://docs.sencha.com/extjs/4.2.1/source/ComboBox.html#Ext-form-field-ComboBox
there is function **setValue: function(value, doSelect) {...**
it has below lines somewhere::
me.setHiddenValue(processedValue);
me.setRawValue(me.getDisplayValue());
These lines are doing a magical stuff which you mentioned.
Now, to solve your problem, I guess you can do this:
select: function() {
console.log(this.el.dom.value);
var actualValue = this.el.dom.value;
this.el.dom.value = 'test';
this.setRawValue(actualValue );
this.setHiddenValue(actualValue);
}
Hope this helps, I have not tested the code though!