Develop Reference

Google Chrome Auto Suggestions hides on focus of input field

When i try to login, google chrome auto suggestions pops up and hides before i can click one of the previously used emails from the dropdown.
enter image description here
I suspected there might be a css class affecting it but that didnt seem to be the case.
Is there any way to force the autosuggestions dropdown to stay on focus of the input field?
Code:
<label htmlFor="email">Email Address</label>
<input
data-testid="email"
id="email"
name="email"
onChange={(e) => handleForm(e)}
placeholder="Enter your email address"
required
type="email"
value={data.email}
/>
<label htmlFor="password">Enter your password</label>
<input
autoComplete="on"
data-testid="password"
id="password"
name="password"
onChange={(e) => handleForm(e)}
placeholder="Enter your password"
required
type={show ? "test" : "password"}
value={data.password}
/>
<Icon
className={styles.viewPassword}
name="viewPassword"
onClick={handlePassWord}
/>
<div>
{success && <SuccessMessage />}
{error && <ErrorMessage />}
</div>
<Button
className={styles.btnClass}
loading={loading}
type={"submit"}
wrapperClass={styles.btn}
>
Login
</Button>
</form>

React Form submits automatically, prevent automatic submission

I have a form which has a rich text editor and a form submit button, the rich text editor has style buttons which when clicked submit the form inputs (which is not desirable).
I want to prevent this behaviour I want the form to submit only when the submit button is clicked and not when the RTE style button is clicked.
Code:-
Form Code

I've moved the RichEditor out of the form.
You can still handle the form submit,
I've added the onClick listener on submit button itself.
Just copy and paste this return statement in your App.js
return (
<>
<div>
<form>
<label htmlFor="contact">
Full Name <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<br />
<label htmlFor="contact">
Email <span id="required-input-star">*</span>
</label>
<br />
<input
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<br />
<label htmlFor="description">
Description <span id="required-input-star">*</span>
</label>
<br />
</form> //closed the form here, and moved out RichEditor
<RichTextEditor />
<hr />
<div className="frm-btn-container">
<input type="submit" value="Cancel" id="cancel-btn" />
<input type="submit" value="Create" onClick={onSubmit} />
</div>
</div>
</>
);
};

Try disabling the button text editor's button.

Disable/Enable Button based on hidden input field variable matches set variable

My registration script has 2 hidden input fields that change to two set variables based on the user input. The form button is disabled by default. My issue is getting the button to be enabled once the two hidden input fields match the set variable.
<form id="register_form" autocomplete="off" method="post" action="">
<h1>Register</h1>
<div id="error_msg"></div>
<div id="pass"><span id='user'></span></div>
<div id="pass"><span id='message'></span></div>
<div id="pass"><span id='message2'></span></div>
<div>
<input type="text" name="username" placeholder="Username" id="username" autocomplete="off" required>
</div>
<div>
<input type="email" name="email" placeholder="Email" id="email" autocomplete="off" required>
</div>
<div class="radio">
<input type="radio" name="opt" value="Yes" checked> Receive Emails for Promotions and Newsletters
<br>
<input type="radio" name="opt" value="No"> Don't Receive Emails for Promotions and Newsletters
</div>
<div>
<input type="password" name="new_password" placeholder="Enter Password" id="new_password" autocomplete="off" required>
</div>
<div>
<input type="password" name="new_password2" id="new_password2" placeholder="Confirm Password" autocomplete="off" required>
</div>
<div>
<input type="text" name="user-response" id="user-response">
</div>
<div>
<input type="text" name="pass-response" id="pass-response">
</div>
<div>
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
</div>
<div>
<button type="submit" id="reg_btn" class="button" name="register" disabled="disabled">Register Account</button>
</div>
</form>
$(function(){
var user = $('#user-response').val();
var pass = $('#pass-response').val();
if(user === 'available' && pass === 'match'){
$("#reg_btn").prop("disabled", false);
} else {
$("#reg_btn").prop("disabled", true);
}
});
When a user enters a username that doesn't exist the 1st "hidden" input field will display available. When a user enters a matching password that meets the requirements it displays match. When those two fields say available and match the button should switch to enabled but it remains disabled.

Form elements and associated labels

How to make associated labels for form elements in below code?
render() {
return (
<section className="col">
<div className="input-group">
<input type="text"
id="search-input"
ref="searchInput"
className="form-control"
placeholder="Filter location..."
onChange={this.handleChange} />
<span className="input-group-addon">Filter</span>
</div>
</section>
)
}

Use below.
<section className="col">
<div className="input-group">
<label for="search-input">Filter</label>
<input type="text"
id="search-input"
ref="searchInput"
className="form-control"
placeholder="Filter location..."
onChange={this.handleChange} />
</div>
</section>
Create label and give input elements id to label's for attribute

Redux Form submit values without hitting submit

I am pretty sure that there is a way to do this with onChange, but in the example: http://redux-form.com/6.0.0-alpha.4/examples/simple/ here provided by redux form when you click the drop down and hit a value it automatically submits the value without having to hit submit.
I copied the exact code and everything works except for the fact that I have to choose all the values I want then hit submit. How do we make it to where we can just start typing in a field or select a value and it automatically get submitted as they have.
I will put the code below incase you do not want to visit the link.
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const { DOM: { input, select, textarea } } = React
const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component={input} type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component={input} type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field name="email" component={input} type="email" placeholder="Email"/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component={input} type="radio" value="male"/> Male</label>
<label><Field name="sex" component={input} type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component={select}>
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component={input} type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component={textarea}/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
export default reduxForm({
form: 'simple' // a unique identifier for this form
})(SimpleForm)