In default semantic-ui we can do this option: https://github.com/Semantic-Org/Semantic-UI/commit/b4ae26d24f75886c3d5f6fc4f00e176f09705a13
But, how to do it in semantic-ui-react? Google nothing say about it, please, I need help.
What I'm trying to achieve:
I'm using redux-form. In my form present semantic component <Form.Select multiple ....> and after success submit - call to redux-form method reset. All is fine, form is clear... but not dropdown/select field. Any ideas?
I solved the problem as follows:
Semantic-ui-react props value set to the current value of the field.
<Form.Select
name={input.name}
options={options}
label={label}
placeholder={placeholder}
search
multiple
selectOnBlur={selectOnBlur}
onFocus={::this.handleFocus}
onBlur={::this.handleBlur}
onChange={::this.handleChange}
defaultValue={defaultValue || []}
value={input.value}
loading={loading} />
Related
I want to change default value of TextField when state change but it doesn't work. I guess it is doesn't re-render.
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>}
Default value is not meant to be changed with state.
You should set the value for reflecting the default value
<TextField
multiline
rows={15}
disabled
id="outlined-basic"
label=""
variant="outlined"
defaultValue="Something that will stay there initially only"
value={!isEn ? data.data[0].description : data.data[0].descriptionLocalization.en}
/>
There are two parts missing to your TextField component that is required to tie the input to state.
As user Mohammad Fasial said, the defaultValue prop is only for the default value the component will have. The correct prop you're looking for is value. State will need to equal value.
To listen for changes when the user inputs new information into the TextField input, you'll need to use the onChange prop. The onChange prop (on change listener) let's you provide a function as an argument to run when the input value changes. In this case we want to set onChange to run setExampleState to set the state to the value of the input field by using the event.target.value property.
function ExampleComponent(){
const [exampleState, setExampleState] = useState([]);
...
return (
<>
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
value={exampleState}
onChange={(event) => setExampleState(event.target.value)}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>
</>
);
}
To learn more about the different properties TextField has, you can look at the TextField API Documentation. There are also a lot of TextField code examples that can be expanded on the Material-UI site as well.
Update the key of Element or Container after Default value Change
For the code below,
<Form.Group>
<Form.Control>
isInvalid
as={
forwardRef(() => (<div>Report</div>))
}
<Form.Control.Feedback type="invalid">Invalid Report</Form.Control.Feedback>
</Form.Group>
The Feedback is not activated even though the Form.Control has the isInvalid prop set to true. I've noticed that it only happens if I pass a custom component using forwardRef().
Is there any other way I can pass a custom control component so that the error classes are added to it?
Problem recreation here - https://codesandbox.io/s/react-bootstrap-demo-forked-5jdpn?file=/src/App.js
I have problem using react-hook-form v7 + material-ui textfield. The defaultValue working if I set autoFocus or I manually change the textfield value. However if I just submit without mouse click on the filed that not autoFocus, the defaultValue disappeared during the form submit. Please check codesandbox link
Test 1: don't touch anything, click submit, you will see submit value only has title but missing name and desc
Test 2: mouse click or change value in name, you will see after submit the value of name is there
My question is how to make this default value always submit even though without mouse click or change the value of the textField?
Please help and thanks in advance
To use Material-ui with react-hook-form. It is better to wrap it with Controller to allow react-hook-form to link with the 3rd party library element.
https://react-hook-form.com/api/usecontroller/controller
Wrap Textfield with Controller
const { handleSubmit, control } = useForm();
...
<Controller
render={({ field }) => (
<TextField
autoFocus
margin="dense"
id="title"
label="Title"
type="text"
fullWidth
{...field}
/>
)}
control={control}
name="title"
defaultValue={data.title}
/>
...
After that, the default value will be able to work as expected.
Here is the codesandbox for demo.
I'm trying to use material-ui-color picker with Formik. I'm using React Material UI FormControl. Here's what I've tried for the color picker:
<FormControl
variant="outlined"
error={Boolean(touched.color_code && errors.color_code)}>
<ColorPicker
id="color_code"
defaultValue="#03a9f4"
onChange={handleChange}
value={values.color_code}
aria-describedby="color_code-error-text"
name="color_code"
/>
{touched.color_code && errors.color_code ? (
<FormHelperText id="color_code-error-text">
{errors.color_code}
</FormHelperText>
) : null
}
</FormControl>
Now, the issue is that, the selected color code is not being populated inside formik form values when I'm submitting the form.
Any help would be highly appreciated. Thanks in advance.
The onChange function provides the hex code directly. You can use the setFieldValue function provided from useFormik hook. So try doing the following:
<ColorPicker
id="color_code"
defaultValue="#03a9f4"
onChange={(value) => setFieldValue("color_code", value)}
value={values.color_code}
aria-describedby="color_code-error-text"
name="color_code"/>
I hope this helps!
The DatePicker is in a wrapper component and although the error message is displaying correctly but it isn't invalidate the field or form if the date is set as incorrect. I know about the onError callback function but I don't know what to call here. The validation is not occuring on onSubmit hence can't use the SubmissionError or submitfailed.
I can pass an external validator from form field but I just leave it as a last option.
Date Picker
<InlineDatePicker
format={DATE_FORMAT_UI}
keyboard
mask={mask}
maxDate={maxDate}
minDate={minDate}
placeholder={DATE_FORMAT_UI}
value={formattedStoreValue}
variant="outlined"
onBlur={this.handleBlur}
onChange={this.handleChange}
**onError={(_,error)=>{ don't know what to do here })}**
{...other}
/>
Form Field
<Field
name={someDate}
component={InlineDatePickerField}
**validate={[required]} //If not possible then add another validator here as last option**
id={someDate}
label="To"
minDate={this.minDate()}
required
className="w-full"
/>