I am using a React redux-form input and this is my code:
return (
<Field
key={name}
component={SurveyField}
type="text"
label={label}
name={name}
autocomplete="off"
/>
);
I don't want chrome to autoComplete the form.
I have tried both but none working.
autocomplete="off"
autoComplete="off"
I suppose Chrome just ignores the autoComplete. I have seen the other StackOverflow questions but they are not helpful.
I find that adding the autocomplete property to the <input autoComplete="off"/> tag defined in your component callback function rather than depending on the redux-form <Field /> tag to pass this property to DOM will properly set this property in the html generated and autocomplete="off" will work as expected.
Related
How would I go about creating refs on child components created by a map function?
So I'm trying to use
"#react-google-maps/api"
to create input fields wrapped by google's autocomplete. However I'm running into an issue where I want to allow the user to create inputs (to add waypoints) and the only way to get their input into an arry is by using refs
<div className={style.form}>
<Autocomplete>
<input type="text" id="from" ref={originRef} placeholder="Enter Starting Location"/>
</Autocomplete>
{wayPoints.map((input, index) => {
return(
<Autocomplete key={index} onChange={e => handleInputChange(index, e)}>
<input type="text" id="from" placeholder="Enter Stop"/>
</Autocomplete>
)
})
}
<Autocomplete>
<input type="text" id="from" ref={destinationRef} placeholder="Enter Ending Location"/>
</Autocomplete>
<div className={style.add} onClick={addNewStop}>
<FaPlus/>
</div>
</div>
However since I'm creating child compoents I'm not sure how to use refs to solve the problem. I tried using a onChange handler function but if you click on the autocomplete recommendation it doesnt save.
This is my code in my form component:
{console.log('Value matching name for Field: ', props.initialValues.name)}
<Field
name="name"
//also tried name="props.initialValues.name"
component="input"
type="text"
placeholder="Name required"
/>
The console log correctly outputs the name value needed.
The <Field/> component never shows the name value that is console logged.
I cannot find an answer in RF documentation or anywhere else.
Using ReduxForms version 8.
I am new to React.
I am using Bootstrap to render my page. All the other tags seem to be working apart from the InputGroup.Text. It doesn't render the id attribute of the text field. It looks as below if I inspect the element:
<input placeholder="Type your question here" class="form-control">
I have tried directly entering "1" as the id and that doesn't render either.
<InputGroup size="sm" className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id={ans.answerno}>{this.mapAlpha(ans.answerno)}</InputGroup.Text>
</InputGroup.Prepend>
<FormControl placeholder="Type your answer here" />
<Form.Check type="checkbox" id={ans.answerno} label="mark answer" />
</InputGroup>
I have checked the documentation online and this seems to me how it should work. Can anyone advise?
It seems like the id is located inside a span before the <input>.
Even checking the documentation rendered code
I want to add a in a react semantic UI
but it cannot send the checked value to server even after I name Checkbox like this:
<Form.Field
label="The question is new to the intent library"
name="newType"
control={Field}
component={Checkbox}
/>
This component is inside a form like this:
<Form>
<Form.Field
label="Rating"
control={Field}
name="rate"
component={Rating}
...
/>
<That checkbox ... />
<Form.Field
label="Comment"
control={Field}
name="comment"
component="textarea"
/>
</Form>
Supposed action should carry the checked value in payload, similar to how rating and comment are carried.
I am stuck in this for half a day
Please help me if you notice something. Thanks!
The problem is solved by using the following code
<Form.Field
control={Field}
label="The question is new to the intent library"
name="newType"
component="input"
type="checkbox"
/>
I'm using ReactJS to render my DOM.
I want to add the spellcheck="false" attribute on a text input, so I do this:
render() {
return (
<div>
<input type="text" placeholder="Name" spellcheck="false" />
</div>
)
}
Then, when I inspect with chrome, the spellcheck attribute is not present.
Try using spellCheck instead. (Note the capital C)
The docs are good for explaining how default HTML attributes should be referenced in React.