When I clicked into the text field it is showing blue outlined.
I want to hide this line. Also remove the mouse hovering.
<GridItem lg={ 6 } xs={ 12 } md={ 3 } className={ classes.textfieldsgrid } >
<TextField
className={ classes.textfields }
label="Email"
variant="outlined"
id="outlined-size-small"
size="small"
style={ styles }
type="email"
name="email"
id="email"
value={this.state.email }
onChange={ this.handleInputChange }
onBlur={ event => this.validateEmail(event.target.value)}
title="Email"
autoComplete="off"
required
/>
<p class="error" style={ { color: 'red' } }>{ this.state.errors.email }</p>
</GridItem>
Related
I have created a form where I am using mui textfields to build the form. I want my textField for the description to be double the width of all the other textFields.
How can I achieve this? To only target one of the textFields
I want to target the last textField in the form and I want that one to be double the width
Below is my code for my form:
import { makeStyles, TextField } from '#material-ui/core';
import { Formik, FormikHelpers } from 'formik';
const useStyles = makeStyles(() => ({
input: {
fontFamily: 'nunito, sans-serif',
color: 'black',
border: '1px solid #393939',
borderRadius: '5px',
marginBottom: '5px',
width: '300px',
padding: '7px',
},
}));
return (
<Formik
initialValues={initialValues}
validationSchema={editUserValidation}
validateOnBlur
validateOnChange={false}
onSubmit={_handleSubmission}
enableReinitialize
>
{({
handleSubmit,
isSubmitting,
values,
touched,
errors,
handleChange,
handleBlur,
handleReset,
}) => (
<form onReset={handleReset} onSubmit={handleSubmit} className="edit-form-body">
<div className="flex">
<TextField
id="firstName"
placeholder="First Name"
type="string"
value={values.firstName}
error={touched.firstName && !!errors.firstName}
helperText={touched.firstName ? errors.firstName : ''}
onChange={handleChange('firstName')}
onBlur={handleBlur('firstName')}
InputProps={{ className: classes.input }}
/>
<div className="mx-5" />
<TextField
id="lastName"
placeholder="Last Name"
type="string"
value={values.lastName}
error={touched.lastName && !!errors.lastName}
helperText={touched.lastName ? errors.lastName : ''}
onChange={handleChange('lastName')}
onBlur={handleBlur('lastName')}
InputProps={{ className: classes.input }}
/>
</div>
<div className="flex">
<TextField
id="email"
placeholder="Email"
type="email"
value={values.email}
error={touched.email && !!errors.email}
helperText={touched.email ? errors.email : ''}
onChange={handleChange('email')}
onBlur={handleBlur('email')}
InputProps={{ className: classes.input }}
/>
<div className="mx-5" />
<TextField
id="mobileNumber"
placeholder="Contact No."
type="string"
value={values.mobileNumber}
error={touched.mobileNumber && !!errors.mobileNumber}
helperText={touched.mobileNumber ? errors.mobileNumber : ''}
onChange={handleChange('mobileNumber')}
onBlur={handleBlur('mobileNumber')}
InputProps={{ className: classes.input }}
/>
</div>
<div className="w-full">
<TextField
id="description"
placeholder="Description"
type="string"
value={values.description}
error={touched.description && !!errors.description}
helperText={touched.description ? errors.description : ''}
onChange={handleChange('description')}
onBlur={handleBlur('description')}
InputProps={{ className: classes.input }}
multiline
maxRows={10}
minRows={5}
/>
</div>
<div className="flex justify-end">
<Button
isLoading={isSubmitting}
onClick={handleSubmit}
className="font-nunito font-bold edit-user-button mt-4"
>
SAVE
</Button>
</div>
</form>
)}
</Formik>
);
};
I have a search bar that uses Autocomplete from material ui to provide suggestions, and inside of it i have text field where I take text as input.
The only problem is that when i type anything in the TextField I can see 2 clear buttons (x button) one on the left of the loading screen and one on the right, and when the loading screen disappears i get 2 clear buttons next to each other. I want to remove the one on the left as it looks bad, and I don't know why it's there.
Search.jsx:
<div className={searchClasses.search}>
<Autocomplete
options={isEmpty ? [] : suggestionsList}
freeSolo
style={{width: "100%"}}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
loading={loading}
style={{margin: 0}}
classes={{ notchedOutline: classes.input }}
onChange={handleOnChange}
onKeyDown={e => handleKeyDown(e)}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option, { inputValue }) => {
const matches = match(option.title, inputValue);
const parts = parse(option.title, matches);
return (
<div>
{parts.map((part, index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
</div>
Solution
Create a new CSS stylesheet (let say styles.css) and add the following code:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
Next, import this stylesheet at the beginning of your Search.jsx:
import "./styles.css";
/* Your code here ... */
Explanation
The left "X" cancel button is present because Webkit-based browsers such as Chrome and Safari automatically adds the cancel button to all <input type="search"> elements. Since your TextField element has the prop type="search", it renders <input type="search"> to the screen and hence your browser automatically adds the "X" button.
The default "X" button can be selected using the ::-webkit-search-cancel-button psuedo-element selector. In our style.css, we select all default "X" buttons in all <input type="search"> elements and we hide them using -webkit-appearance: none;
I have a form displaying inside a modal component with several text inputs and select components but somehow the Select Labels are showing at the top left corner of the form. I followed the solution explained here but I am obtaining the same result. Another problem is that when clicking on one Select the other seems to be linked and show focused. I am not experienced with Material and I have been using it for a couple of days only. I really like it but I am a bit lost here. Also, the Select on the left is not aligned with the Text input.
This is the Dialog/Form code. Disregard the Select onChange event functions
{/* Modal Dialog to add the Form*/}
<Dialog maxWidth="100" open={createOpportunity} onClose={handleDialogClose}>
<DialogTitle align='center' id="form-dialog-title">Add New Opportunity</DialogTitle>
<FormControl className={classes.formMainClass}>
<div className='formDivs'>
<TextField autoFocus margin="dense" id="name" label="Opportunity Name" type="text" fullWidth/>
<TextField margin="dense" id="address" label="Address" type="text" fullWidth/>
<TextField margin="dense" id="city" label="City" type="text" fullWidth/>
<div className='state-zip'>
<InputLabel htmlFor="state">State</InputLabel>
<Select fullWidth inputProps={{id: "state"}} value={value} onChange={event => setValue(event.target.value)}>
<MenuItem value="">Empty Value for First Option</MenuItem>
<MenuItem value="Hey">Hey</MenuItem>
</Select>
<span> </span>
<TextField margin="dense" id="zip" label="Zip" type="text" fullWidth/>
</div>
<TextField margin="dense" id="architect" label="Architect" type="text" fullWidth/>
<TextField margin="dense" id="consultant" label="Consultant" type="text" fullWidth/>
<TextField margin="dense" id="duedate" label="Due date" type="date" fullWidth InputLabelProps={{shrink: true}}/>
</div>
<div className='formDivs'>
<InputLabel htmlFor="manager">Manager</InputLabel>
<Select fullWidth inputProps={{id: "manager"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<div className='state-zip'>
<InputLabel htmlFor="status">Status</InputLabel>
<Select fullWidth inputProps={{id: "status"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
<span> </span>
<InputLabel htmlFor="source">Source</InputLabel>
<Select fullWidth inputProps={{id: "source"}} value={value} onChange={event => setValue(event.target.value)}>
</Select>
</div>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="description" label="Description" type="text" fullWidth/>
<TextField multiline rows={4} rowsMax={Infinity} margin="dense" id="notes" label="Notes" type="text" fullWidth/>
</div>
</FormControl>
<DialogContent>
<DialogContentText>Opportunities text.</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleDialogClose} color="primary">Cancel</Button>
<Button onClick={handleDialogClose} color="primary">Save</Button>
</DialogActions>
</Dialog>
Code for the Styling
.opportunities {
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
width: auto;
}
.top-buttons {
margin-top: 15px;
margin-bottom: 0;
width: 90%;
}
.formDivs {
width: 50%;
margin: 1% 3%;
}
.state-zip, .manager {
display: flex;
flex-direction: row;
}
Any advise, comment or suggestion is highly appreciated.
the issue is happening because you're using the FormControl element in the wrong way. This element is used to get extra control/feature/functionality over the individual form input.
So wrap your input elements with FormControl individually if you're planning to use FormControl functionalities and use div or form as a wrapping element instead of FormControl in your current code(form will be better).
Here is a related answer
Here is a working demo with the form tag :
index.js:1 Warning: React does not recognize the `InputProps` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `inputprops` instead.
If you accidentally passed it from a parent component, remove it from the DOM element
<form onSubmit={(e) => onSubmit(e)} style={{ margin: "0.5em" }}>
<Grid container>
<Grid item xs={6}>
<TextField
InputProps={{ disableUnderline: true }}
name="USERNAME"
id="USERNAME"
value={USERNAME}
label="username"
error
helperText={error.USERNAME}
onChange={(e) => onInputChange(e)}
/>{" "}
<br />
<TextField
InputProps={{ disableUnderline: true }}
type="text"
name="FIRSTNAME"
label="firstname"
value={FIRSTNAME}
onChange={(e) => onInputChange(e)}
error
helperText={error.FIRSTNAME}
/>{" "}
<br />
<TextField
InputProps={{ disableUnderline: true }}
type="text"
name="LASTNAME"
value={LASTNAME}
label="lastname"
onChange={(e) => onInputChange(e)}
error
helperText={error.LASTNAME}
/>{" "}
<br />
<TextField
InputProps={{ disableUnderline: true }}
type="text"
name="PHONE"
value={PHONE}
label="phone"
onChange={(e) => onInputChange(e)}
error
helperText={error.PHONE}
/>{" "}
<br />
<TextField
InputProps={{ disableUnderline: true }}
id="EMAIL"
name="EMAIL"
value={EMAIL}
label="email"
onChange={(e) => onInputChange(e)}
error
helperText={error.EMAIL}
/>{" "}
// ...
</Grid>
</Grid>
</form>
Why does React think the InputProps prop will be added to the DOM as an attribute?
Single FormItem Demo in antd:https://ant.design/components/form/#components-form-demo-dynamic-form-item. There only one FormItem generated dynamically everytime.
And, here is
But I always got some errors like wrong interaction, wrong validation or wrong form value.
My code:
<Form.List name="passenger">
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? 'Passengers' : ''}
required={false}
key={field.key}
>
<Form.Item
{...field}
validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
},
]}
noStyle
>
<Input placeholder="passenger name" style={{ width: '40%' }} />
</Form.Item>
<Form.Item
name={['age', index]}
validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: "Please input passenger's age or delete this field.",
},
]}
noStyle
>
<Input placeholder="passenger age" style={{ width: '40%', marginRight: 8 }} />
</Form.Item>
{fields.length > 1 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => {
remove(field.name);
}}
/>
) : null}
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: '60%' }}
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
From the example provided by the antd team given by #Sushilzzz:
The trick is to use field.name in the name props of the Form.Item. You don't have to nest the sub items in another item.
<Form.List name="users">
{(fields, { add, remove }) => (
<div>
{fields.map((field) => (
<Form.Item name={[field.name, "name"]}>
<Input placeholder="Name" />
</Form.Item>
...