After my login form is autocompleted by the browser, the queried password input's value is empty. After I click into the password field, the value gets magically available, also there are many events fired by the browser that don't make sense. (The onChange on password input is not among them.)
Why is the value on input[type=password] empty?
Why the autocomplete on password input doesn't fire onChange event?
( it fires on normal input )
Bonus question: Why there is the second (unnecessary) focus/blur event?
1. Both inputs set to type="text"
Both inputs get rendered once (no autocomplete)
note: My inputs are uncontrolled but stateful and I track state changes on focus, blur, change
entered=true when there is a value entered
focused=true when onFocus fired, =false when onBlur fired
peek=true when I need to programatically force type from password to text
2. Input set to type="password"
(See how the form is autocompleted.)
...
2.render (red arrow) - Browser focused the input
onChange fired on email input
3.render - Internal state changed (entered=true)
4.render - Browser unfocused the input
5.render (yellow arrow) - Browser focused the input again?
6.render - Browser unfocused the input
Browser didn't make any changes to dom element
preview password - changed input type to text programatically
manual validateForm() - password is empty, form is invalid
manual interaction also says the value is "" empty
What is interesting is that after pressing the PrtScr in the browser, the value gets available and form gets rerendered - as when focusing the input by hand.
An issue on the React GitHub discussing this: https://github.com/facebook/react/issues/1159. Spoiler: it's been active since Feb 2014 with no resolution.
Possible workaround: making a custom change handler that listens to the native browser event instead of the react synthetic one. This is complicated by the fact that we're using custom input elements from our validation library instead of native inputs which I'm sure to have their own change handlers to re-validate and we don't want to break those
Another possible workaround: save refs to all the form fields and manually grab their .value before submitting rather than relying on the managed values in the state, which is decidedly non-reactive and definitely not ideal
Related
I am working on customJs for swagger.
There I want to fill out an input field in advance for my use case.
Basically I can't see the code attached to the input field generated by swagger, but I can fill the input field with inputElement.setAttribute('value',"some stuff" )
But this does not trigger function as it seems, because when I proceed to use the submit button, it says the field is empty, only after I MANUALLY typed a letter and removed it, it recognized my changes.
Can I somehow trigger whatever the underlying function might be?
I have a rivet.js input field that is bound to an array (scannedUpcs)
When I type with my keyboard, the input field updates the var scannedUpcs but when I use a virtual keyboard to input numbers in, the numbers appear in the text form but the var is never updated and remains null.
I have noticed that when I type with my keyboard, the input triggers an onchange event which does not happen with my virtual keyboard. If there are any ideas out there of what to try or any more clarification that I need to give, that would be much appreciated :)
Binding scannedUpcs to element scan-item-div:
HTML of the #scan-item-div:
HTML of the virtual Keyboard:
js for the keyboard input where currField = $(".price-input") and there is only 1 element with class "price-input":
A little Explanation : I am using List view control of kendo UI(Telerik). I am triggering an update event of that control after editing the fields in list view. The list view control is having some text-boxes, a dropdown,checkbox and a submit button. When a user change something, ideally it should trigger update but its not doing update because control is not able to judge if there is a change in model.
It is only working if I input something in textbox and just click on outside of textbox i.e just do a onblur before hitting submit. I don't know why it is happening but what I need is to just trigger a focus event but in a hidden mode so that user is unaware of it but it just happens after a user input something in textbox so that the list view control works successfully.
I am trying to do it like below but it will get noticed to user. How can i trigger focus in hidden mode after a user just enter something in textbox before hitting a submit?
function BlurFunc() {
debugger;
$(this).closest('li').find('.inputField').focus();
}
Without your code it is not clear whether you are using MVVM data binding to your model, but this may help; from http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value:
By default the value binding relies on the change DOM event, which is
raised after blurring the element whose value has changed. This means
that the value from the View-Model is updated when the element loses
focus. The data-value-update attribute can be used to specify a
different DOM event, such as keyup or keypress. The keydown event is
not supported, because the DOM element value is not yet updated when
that event triggers.
For example, try adding data-value-update="keyup" as an attribute to your text box input element:
<input data-value-update="keyup" data-bind="value: inputValue" />
This should then update the model value upon each key press and not wait until focus has been removed.
I am testing an app where we have written a directive which will attach blur event to input element,
Once user type some value and come out from textbox then it will check if value is not duplicate,
based on response it will set value using ctrl.$setValidity('unique', true);
When I am setting some unique to textbox using elem.sendKeys('newVal') and go to another input, it does not trigger blur event attached to the element.
I'm using Dynamic Data 4 on my project.
In a template field there's a button that modify (via javascript) the value of the databound input field.
The button modify the input box value correctly but when the input field get the focus his value it's resetted to the previous value. The same happens when saving the form. If the input box previously received input from the keyboard the value it's correctly stored.
Is that behaviour to be considered normal with those premises? There's a way to avoid it?
Thank you very much.
The problem was caused by the presence of an associated asp:TextBoxWatermarkExtender who resetted the value when the (originally null) textbox got the focus.