Develop Reference

How can I disable react-number-format input

I'd like to disable react-number-format input, but this component doesn't have disabled property.
How can I disable it?

disabled is working fine.
I have placed 2 components, one without the disabled attribute and the other one with the disabled attribute and the result is the desired one.
<NumberFormat
value={111}
thousandSeparator={true}
prefix="$"
className="some"
inputmode="numeric"
/>
<NumberFormat
value={222}
thousandSeparator={true}
prefix="$"
className="some"
inputmode="numeric"
disabled
/>
Check this sandbox

Using conditional operators in v-model?

I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>

You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"

If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.

Disable entire form elements with respect to a state. React

I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>

I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.

I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...

Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.

How to modify label of input using JQuery

I have HTML like following :
<div class="task-manager">
<label>Manager: <input type="text" value="" /></label>
</div>
I need to modify text of label Manager dynamically.
I tried using JQUERY text method, but it replaces input type also.
$taskTemplate.find(".task-manager label").text("M123")

You can use:
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";

You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:
<div class="task-manager">
<label>Manager:</label> <input type="text" value="" />
</div>

Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this
HTML code:
<div class="task-manager">
<label for="title">Manager:</label>
<input type="text" id = 'title' value="" />
</div>
JS code:
$('.task-manager label').text('Deputy Manager :');
Live Demo # Jsfiddle:
http://jsfiddle.net/dreamweiver/w6arp71x/
note/suggestion:for attribute added to label to bind the input to the label by default

$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"
this worked for :)

INPUT TEXT remove browser default dropdown

how can i remove the focusin dropdown that you see in this image?
by css or javascript? How?
thanks.

Use autocomplete="off":
<input type="text" autocomplete="off">
However, this is a non-standard attribute for HTML version < 5. In HTML5 you can freely use this attribute, see the reference:
http://www.w3.org/TR/html5/the-form-element.html#attr-form-autocomplete

If that's input of type text then you can do it by specifying attribute autocomplete:
<input type="text" autocomplete="off"/>

Attribute for <INPUT ...>
AUTOCOMPLETE = ON | OFF
<input type="text" autocomplete="off">
Good read
How to Turn Off Form Autocompletion