Develop Reference

How do I prevent a user from being able to type or click in an input field? [React]

A bit of an odd request, but I'm looking for a way to have an input field be completely un-interactable with.
I have a component with an input field that the user should interact with. In another page of my app, I want to reuse the visual of that component, but they should not be able to interact with it.
I have tried:
<input
type="text"
placeholder="[Click here to enter scramble you want to solve]"
onClick={(e) => e.preventDefault()}
/>
But it did not work.

Add a prop for disable the input based on parent component where you want to use
<input
type="text"
placeholder="[Click here to enter scramble you want to solve]"
onClick={(e) => e.preventDefault()}
disabled={props.disabled}
/>

Try readonly inside input field, it might work for you
<input readonly type="text">

How to validate react select

I am using react-select for better look on UI, and I have implemented it, Now what I am trying to do is
I want to validate that input field when user clicks on Done button (form submit)
I am using react-hook-form for validation
They provide ref={register} which holds the input field value
so for normal input field or select I am able to use this like below
<label htmlFor="fname">
First Name
</label>
<input
type="text"
name="fname"
id="fnameid"
className="form-control"
ref={register({
required: 'First name is required',
})}
/>
{errors.fname && (
<div>
<span className="text-danger">
{errors.fname.message}
</span>
</div>
)}
Now the above is working fine but in case of react-select I do not know how to go forward
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
/>
So here when I click on submit button it is only taking validation for fname and giving output on console for fname only
I tried doing like below
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
ref={register({
required: 'age is required is required',
})}
/>
Code sandbox Here is my code sandbox My working code, Please check
Edit
I Tried This approach but it is not taking up defaultValue or Value, as I want to show one value selected, a nd in some cases I am getting values from server Which I want to show as selected.

Here is the link for codesandbox, you can either wrap the component in the Controller or use setValue to manually set values and validate
https://codesandbox.io/s/bitter-wave-w1cpi?file=/src/App.js:2084-2802
https://w1cpi.csb.app/
reference
https://react-hook-form.com/get-started#IntegratingwithUIlibraries

how to remove property of object on uncheck in react?

I am using react-final-form and taking help from this example
https://codesandbox.io/s/52q597j2p
in above example giftCardMessage property is removed from the object when user unchecked this field Is this a gift?
steps to reproduce.
checked the Is this a gift? field and enter something Message in text field .then unchecked see property will remove.
I used the above concept and try to make same thing .but in my example I used prefixed .in my example if I unchecked the checkbox it didn't remove the property of object
https://codesandbox.io/s/react-final-form-declarative-form-rules-uvz6y
<WhenFieldChanges
field="gift"
becomes={false}
set="giftCardMessage"
to={undefined}
/>
<FieldPrefix prefix="apps.dh">
<div>
<label>Is this a gift?</label>
<PrefixedField name="gift" component="input" type="checkbox" />
</div>
<div>
<label>Message</label>
<PrefixedField
name="giftCardMessage"
component="textarea"
placeholder="What do you want the card to say?"
/>
</div>
</FieldPrefix>

The message input should be automatically disabled when the box is unchecked(value of gif is either true or false), check here https://imgur.com/a4Eigoh
You should add: disabled={!values.gift} to your message for it to respond to the value of the box

is there any way to disable only input not the label in semantic ui Input in react

We are using semantic-ui in react for forms.
When I use disable for Input , it's disabling both label and input field.
I used like below
<Input disabled placeholder='Search' label='Name' />
Is there any way to disable only input box not the label??
Thanks in advance :)

Submitting the value of a disabled input field

I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?

I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />

I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.

you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />

Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;