We Keep Coding

Turn off autoComplete for all inputs in React app

This answer explains how to turn off autocomplete for an entire HTML document with jQuery.
Without jQuery is there a way to turn "off" React's equivalent autoComplete for all inputs within the app?
I'm not very familiar with jQuery otherwise I'd try to convert the function myself.

To disable the autocomplete for input fields in React, we need to set the input field’s autoComplete attribute to "new-password".
<input type="email" name="email_signup" placeholder="Email" autoComplete="new-password" />
<input type="password" name="password_signup" placeholder="Password" autoComplete="new-password" />
This will turn off autocomplete for input.

You can use autocomplete="off" on the parent level of the form and that will turn it off for the entire form
<form method="post" action="/form" autocomplete="off">
[…]
</form>

use this in elements:
autoComplete:'off'

You can do it with
<input name="myinput" placeholder="enter your name" value={this.input.myinput} autocomplete="off" />

The post that you are linking is just assigning the autocomplete off attribute to the document when it is loading. You can accomplish what jQuery is doing with something like the following using vanilla JS. However, I would suggest a more "React" way of doing things based on whatever logic you wish to accomplish.
var foo = document.querySelector("input");
foo.setAttribute("autoComplete", "off");

undefined value in semantic-ui input

I have simple from which i used semantic-ui-react to create it :
<Form onSubmit={this.handleSubmit.bind(this)}>
<Form.Field>
<Input placeholder="From ..." type="text" ref="from" />
<Label pointing>please enter valid email adress</Label>
</Form.Field>
<Divider />
now i cant access to value's of the input. here is my code:
from: this.refs.from.value
it's all undefined.how can fix this ?

I recommend to use Form and related components in the controlled way, because most of SUIR components are functional, so they don't support refs. I've a codepen to show it in action. There is also example in docs.

v-model in dynamic component

I have a list of dynamic components that I render with a for loop.
<component
v-for="component in components"
:key="component.componentId"
:is="component.type"
:componentId="component.componentId">
</component>
One of the different component types is an element that contains an input field. I want to attach v-model to that input.
<input type="text" :name="name">
works but when I do
<input type="text" :name="name" v-model="value">
I get no errors but the component is not rendered. However
<input type="text" :name="name" :value="value" #input="setValue">
works, if used with an appropriate method setValue to update the value attribute.
How should I use v-model in the component?

Apparently dynamic type bindings don't work with v-model. Found a commit in the repository that confirms this. For some reason it doesn't give me the warning, even though process.env.NODE_ENV == undefined.
In the original question I stripped a lot of code to make it more readable but seems like I missed the important part.

ReactJS: How to put <input/> inside a Material UI's <TextField/>?

I am trying to make <TextField/> (http://www.material-ui.com/#/components/text-field) as <input/>. So I attempted the following:
<TextField
hintText='Enter username'
>
<input
className="form-control"
ref='username'
type='text'
/>
</TextField>
But it is not picking up the ref correctly. When this.refs.username.value.trim() is logged, it displays an error that value is undefined. But when <input/> is used alone, it picks up the inputted text correctly.
What is the proper the way to use <input/> but with <TextField/> as wrapper for styling?
Thank you in advance!

I don't think you can have an input field inside a TextField component

Material UI's TextField Is An Input So all You need to do is add another TextField Below it add styling if you want them closer
you couldnt do <input><input></input></input> in normal HTML.
<TextField hintText="Hint" name="Name" fullWidth={true} onChange={this.handleChange} />
you just need a handle change function which you should be able to work out from googling if you need one.

knockout textinput modify observeable not updating text

i´m using textinput data-binding off the latest knockout version.
on an input like:
<input type="text" placeholder="name" data-bind="textinput:vm.found().term">
and it works just like a charme, problem:
when i modify the value with some other script like:
vm.found().term("somecontent")
the input does not change?
i need the value of the textinput to change when i change the observable
the doc says nothing about textInput

You should never have raw, deeply nested bindings like you have there. Assuming the found value has changed, it the text box will still be bound to the previous found object. You probably should be using a with binding somewhere.
<div data-bind="with: vm.found">
<input type="text" placeholder="name" data-bind="textinput: term">
</div>