We Keep Coding

Typeahead value won't persist when updated with Javascript

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.

Fill out input field with code doesn't trigger onChange functions

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?

opening ngx-bootstrap typeahead on focus

Is there any way to open the ngx-typeahead when a user enters the input. In other words, on focus
I can get the dropdown to open if I type a single character into the input box, and then hit backspace.

just add this to the input
[typeaheadMinLength]="0"

Setting [typeaheadMinLength]="0" is the way to do this, but it also has the side effect of triggering a search even when nothing is typed in yet. I my case I needed to run the search on focus, but only if the textbox already had some content. I did this using a reference to the input's value:
<input #searchBox
[typeaheadMinLength]="searchBox.value?.length > 0 ? 0 : 1"
/>

You will need to do two things to make this possible:
First, set [typeaheadMinLength]="0" to have the input open when nothing has been typed yet.
Secondly, since the type ahead input is the first field in the form, you may need to add a small delay by also setting [typeaheadWaitMs]="300 (or some value). This is because the input may receive focus before the values are available.
Example:

Empty password input value on autocomplete (React.js)

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

javascript and dynamic data

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.