I have a file which renders RadioGroup, FormControlLabel and FormControl. Below is the code for this
import React from 'react';
import PropTypes from 'prop-types';
import Radio from '#material-ui/core/Radio';
import RadioGroup from '#material-ui/core/RadioGroup';
import FormControl from '#material-ui/core/FormControl';
import FormLabel from '#material-ui/core/FormLabel';
import FormControlLabel from '#material-ui/core/FormControlLabel';
export const RenderRadioGroup = ({ label, children }) => {
return (
<FormControl>
<FormLabel
style={{
margin: '20px 0 20px 0',
color: '#000000',
fontSize: '20px',
fontWeight: 'bold',
}}
>
{label}
</FormLabel>
<RadioGroup row>{children}</RadioGroup>
</FormControl>
);
};
export const RenderRadioButtonWrapper = props => {
return <FormControlLabel control={<CustomRadioButton />} {...props} />;
};
export const CustomRadioButton = props => {
return <Radio {...props} />;
};
RenderRadioGroup.propTypes = {
children: PropTypes.node.isRequired,
label: PropTypes.string,
};
RenderRadioButtonWrapper.propTypes = {
label: PropTypes.string,
};
CustomRadioButton.propTypes = {
label: PropTypes.string,
};
In the main file, I am calling these components as follows
<form>
<Field
name="typeofintimation"
label="Type of intimation"
component={RenderRadioGroup}
>
<Field
label="Via Call"
name="viacall"
value="viacall"
component={RenderRadioButtonWrapper}
/>
<Field
label="Via Email"
name="viaemail"
value="viaemail"
component={RenderRadioButtonWrapper}
/>
</Field>
<Field component={renderTextFieldGroup} label="Caller Details">
<Field component={renderTextField} label="Caller Name" />
<Field component={renderTextField} label="Caller Email" />
<Field component={renderTextField} label="Caller Contact" />
</Field>
</form>
I am getting the radio fields but both are checked. I cannot select or deselect the radio buttons.
What am I missing here? Is there some props which I need to pass in either the component or the main file?
I am also using redux-form here so I need some assitance in that.
You need to explicitly supply a name in the props so that the system knows that the two radio buttons belong to the same group. The documentation for the API in its list of props says:
name string The name used to reference the value of the control. If
you don't provide this prop, it falls back to a randomly generated
name.
See https://material-ui.com/api/radio-group/ for the full list.
Radio buttons are grouped by name - so if you click one of the buttons in a group all the others are cleared. You have the two radio buttons but they have different names so the system thinks they are in different groups and so both can be checked.
If you try replacing:
<Field
label="Via Call"
name="viacall"
value="viacall"
component={RenderRadioButtonWrapper}
/>
<Field
label="Via Email"
name="viaemail"
value="viaemail"
component={RenderRadioButtonWrapper}
/>
with
<Field
label="Via Call"
name="viamethod"
value="viacall"
component={RenderRadioButtonWrapper}
/>
<Field
label="Via Email"
name="viamethod"
value="viaemail"
component={RenderRadioButtonWrapper}
/>
you can only select one in 'naked' HTML. However, where you are creating the radio buttons using the API you need to explicitly set name: and make it the same name for both e.g. name: 'viamethod' otherwise you will get random names and the two radio buttons won't be in the same group.
start with radioValue's state as "".
<RadioGroup row className={classes.FormGroup}>
<FormControlLabel
classes={{ label: classes.label }}
control={
<Radio
name="Yes"
checked={this.state.radioValue[key]}
onClick={(e) => {this.handleRowClick(e, row, index)}}
value="Y"
/>
}
label="Yes"
labelPlacement="end"
/>
<FormControlLabel
classes={{ label: classes.label }}
control={
<Radio
name="No"
checked={this.state.radioValue[key]}
onClick={(e) => {this.handleRowClick(e, row)}}
color="secondary"
value="N"
/>
}
label="No"
labelPlacement="end"
/>
</RadioGroup>
Related
I would love to have a search bar in "Select" component from the library native-base in react-native.
I have tried adding a "TextInput" component inside the "Select" component. In UI it aligns perfectly, but when I click on the "TextInput" it gets selected and the list drops down.
Following is the code I tried:
<Select
w={w}
h={h}
variant="outline"
selectedValue={selectedValue}
minWidth="200"
// borderColor={primaryColor}
accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" }
placeholder={placeholder?placeholder: "Choose Service"}
_selectedItem={{
bg:"coolGray.200",
// endIcon: <CheckIcon size="5" />
}}
mt={1}
onValueChange={onValueChange}
>
<Input
placeholder="Search"
variant="filled"
width="100%"
h={heightPercentageToDP("6%")}
borderRadius="10"
py="1"
px="2"
borderWidth="0"
/>
{
data?.map(item => {
return(
<Select.Item
label={item.label}
value={item.value}
/>
)
})
}
</Select>
Select box of native base has prop _actionSheetBody, it contains IFlatListProps so you can use ListHeaderComponent in there. So can use this way.
You use a state to save search value:
const [searchValue, setSearchValue] = React.useState<string>('');
Edit select box
`
<Select w={w} h={h} variant="outline" selectedValue={selectedValue}
minWidth="200"
accessibilityLabel={accessibilityLabel?accessibilityLabel: "Choose Service" }
placeholder={placeholder?placeholder: "Choose Service"}
_selectedItem={{
bg:"coolGray.200",
// endIcon: <CheckIcon size="5" />
}}
mt={1}
onValueChange={onValueChange}
_actionSheetBody={{
ListHeaderComponent: <FormControl px={3} mb={3}>
<Input
px={15}
py={2}
fontSize={16}
value={searchValue}
placeholder=""
_focus={{ bg: colors.white['50'], borderColor: 'darkBlue.600' }}
type='text'
onChangeText={(value: string) => {
setSearchValue(value);
}}
/>
</FormControl>
}}
>
<Input
placeholder="Search"
variant="filled"
width="100%"
h={heightPercentageToDP("6%")}
borderRadius="10"
py="1"
px="2"
borderWidth="0"
/>
{
(data && data.length)?data.filter((item)=>{
// you filter with searchValue
return true;
}).map(item => {
return(
<Select.Item
label={item.label}
value={item.value}
/>
)
})
}
</Select>
I have a Material-UI Select inside a nested useFieldArray. Every time I'll add the Material-UI Select and submit it to the form, whatever values that were entered in the form will not be saved and do not log in to the console. Also, I keep on having this warning when I do not have a ref anymore.
Link to codesandbox where codes are complete here: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/nestedFieldArray.js:0-1722
Warning: Invalid value for prop refer on tag. Either remove it
from the element, or pass a string or number value to keep it in the
DOM.
Material-UI select
import { InputLabel, MenuItem, FormControl, Select } from "#mui/material";
const Size = ({ name, refer, defaultValue }) => {
return (
<FormControl fullWidth variant="filled">
<InputLabel id="Size Label">Size</InputLabel>
<Select
labelId="Size"
id="size"
name={name}
label="Product"
refer={refer}
defaultValue={defaultValue}
>
<MenuItem value="S">Small</MenuItem>
<MenuItem value="M">Medium</MenuItem>
<MenuItem value="L">Large</MenuItem>
</Select>
</FormControl>
);
};
export default Size;
I'm using the Size here:
import React from "react";
import { useFieldArray } from "react-hook-form";
import Size from "./Drop_drowns/Size";
import { TextField } from "#mui/material";
export default ({ nestIndex, control, register }) => {
const { fields, remove, append } = useFieldArray({
control,
name: `test[${nestIndex}].nestedArray`
});
return (
<div>
{fields.map((item, k) => {
return (
<div key={item.id} style={{ marginLeft: 20 }}>
<label>Colors:</label>
<Size
name={`test[${nestIndex}].nestedArray[${k}].field1`}
refer={register({ required: true })}
defaultValue={item.field1}
style={{ marginRight: "25px" }}
/>
{/* <input
name={`test[${nestIndex}].nestedArray[${k}].field1`}
ref={register({ required: true })}
defaultValue={item.field1}
style={{ marginRight: "25px" }}
/> */}
<TextField
name={`test[${nestIndex}].nestedArray[${k}].field2`}
refer={register()}
defaultValue={item.field2}
/>
<TextField
name={`test[${nestIndex}].nestedArray[${k}].field3`}
refer={register()}
defaultValue={item.field3}
/>
<button type="button" onClick={() => remove(k)}>
Delete Colors
</button>
</div>
);
})}
<button
type="button"
onClick={() =>
append({
field1: "field1",
field2: "field2"
})
}
>
Add Colors
</button>
<hr />
</div>
);
};
I want to alter the font colour of disabled MUI TextField.
It should be black so that it is visible.
Here is code
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
/>
I removed underline for standard text Field. Now I want text color black when it is disabled.
Inspired by Madhuri's solution, you can also use the sx prop without importing styled:
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "black",
},
}}
/>
You need to use ".Mui-disabled" class to override required css as below,
import TextField from "#mui/material/TextField";
import { styled } from "#mui/material/styles";
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
}
}));
function App() {
return (
<>
<span>Disabled Input:</span>
<CustomDisableInput
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
value="your text"
InputProps={{ disableUnderline: true }}
disabled={true}
/>
</>
);
}
Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv
I'm trying to create multiple posts at once in a react-admin Create view. It's similar to one-to-many whereby one author can create multiple posts at once in a Create component in react-admin. I haven't found a working way when using a TabbedForm.The reason being when you fill a single field, it autocompletes on the other TabbedForm since the TextInput relate to the same source name.I would like to know how to handle multiple form inputs using React-Admin Tabs without having to render the inputs twice.
Here is the source code
import * as React from "react";
import {
List,
Create,
ArrayInput,
SimpleFormIterator,
TextInput,
DateInput,
Datagrid,
TextField,
DateField,
Admin,
Resource,
TabbedForm,
FormTab
}
from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
//read ops
export const PostList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="body" />
<DateField source="published_at" />
</Datagrid>
</List>
);
//create ops
export const PostCreate = (props) => (
<Create {...props}>
<TabbedForm>
<FormTab label="single Post">
<TextInput variant="outlined" source="title" />
<TextInput variant="outlined" source="body" options={{ multiLine: true }} />
<DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
</FormTab>
<FormTab label="Multiple Post">
<TextInput variant="outlined" source="title" />
<TextInput variant="outlined" source="body" options={{ multiLine: true }} />
<DateInput variant="outlined" label="Publication date" source="published_at" defaultValue={new Date()} />
<ArrayInput source="posts">
<SimpleFormIterator>
<TextInput variant="outlined" label="title" source="title" />
<TextInput variant="outlined" label="body" source="teaser" />
<DateInput variant="outlined" label="Publication date" source="published_at" />
</SimpleFormIterator>
</ArrayInput>
</FormTab>
</TabbedForm>
</Create>
);
//main
const App = () => (
<Admin title="ubeezy blog" dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
<Resource name="posts" list={PostList} create={PostCreate} />
</Admin>
);
export default App;
PostCreate component is relevant here since I have Single and Multiple post creations of which when creating a single post, it picks up the input details and reflects on Multiple post creation tab fields.
Interactive demo at codesandbox:
https://codesandbox.io/s/ra-multiple-form-creation-1ecmi?file=/src/App.js
I'd appreciate the help.
When I use Form in modal of semantic-ui-react, it shows that error.
Warning: validateDOMNesting(…): cannot appear as a descendant
of
I know it is show if there are form in form.
Below is my code, there are no one. if i don't use modal, there are no error.
import { useState } from "react";
import { Helmet } from "react-helmet";
import { Button, Modal, Form } from "semantic-ui-react";
import { Body, Wrapper, Content, Article } from "../../Styles/Wrapper";
// eslint-disable-next-line import/no-anonymous-default-export
export default (company_id, company_secret, onSubmit) => {
const [open, setOpen] = useState(false);
return (
<Body>
<Wrapper>
<Helmet>
<title>juju</title>
</Helmet>
<Content>
<Article>
<Modal as={Form}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
open={open}
trigger={
<Button
style={{ marginBottom: 10, backgroundColor: "#FEE500" }}
size="large"
fluid
>
<span style={{ fontSize: 15 }}>begin</span>
</Button>
}
>
<Modal.Header>add</Modal.Header>
<Modal.Content>
<Form onSubmit={onSubmit}>
<Form.Group>
<Form.Input
placeholder="put id"
name="id"
{...company_id}
/>
<Form.Input
placeholder="put secret"
name="secret"
{...company_secret}
/>
<Form.Button content="Submit" />
</Form.Group>
</Form>
</Modal.Content>
</Modal>
</Article>
</Content>
</Wrapper>
</Body>
);
};
You cannot have a form inside a form. Remove as={Form} when rendering the Modal component. You should also fix the function arguments since the component receives a props object. You should destructure company_id, company_secret, and onSubmit.
export default ({ company_id, company_secret, onSubmit }) => {
// ...
}
And there are a few issues with the <Form.Input> components. You should pass them the value and onChange props. You could create a couple of state variables companyId and companySecret to manage the input states.
const [companyId, setCompanyId] = useState(company_id)
const [companySecret, setCompanySecret] = useState(company_secret)
<>
<Form.Input
name="id"
value={companyId}
onChange={(e) => setCompanyId(e.target.value)}
/>
<Form.Input
name="secret"
value={companySecret}
onChange={(e) => setCompanySecret(e.target.value)}
/>
</>
P.S. I would suggest using camelCase variables everywhere (unless you absolutely have to use snake_case) for consistency.