I am trying to use the DateTimePicker component from react-widgets
Is it possible to disable keyboard input (and copy pasting) for the DateTimePicker input field and only constrain dropdown selection.
The disable API disables everything, including the dropdown selection menu. My intent is to constraint which values the user is allowed to select, and I can only do it from the dropdown menu.
Try this:
<DateTimePicker
inputProps={{
component: props => <input {...props} readOnly />
}}
/>
There's an active issue in react-widgets
repo to allow to set readOnly for just the input, which would accomplish this task more elegantly.
I solved it by handling onChangeRaw that listens for changes on the input and setting the current field value to empty string.
<DatePicker
value={this.state.startDate}
onChangeRaw={event =>
this.setState({startDate: ''})}
onChange={value =>
this.setState({startDate: value})}
/>
Related
I have a multiple choice dropdown menu that populates with data that is stored in my database. When I try adding or deleting one of the options in the dropdown menu, the change is not reflected in the field. My code is below:
<div className={styles.below}>
Items:
{items.map(item =>
<Field
key={item}
name="items"
component={AutoComplete}
required={true}
options={item}
/* placeholder={initialData.tas} */
value={values.items}
onChange={handleChange}
/>
)}
</div>
I want the changes I make to be reflected in the dropdown menu field. Currently, if I click to add an option that wasn't selected, or if I click to un-add an option that was already selected, nothing happens. Any help would be greatly appreciated :)
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
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 am trying to open the Datepicker by pressing tab (when you are entering mutiple fields it is easy to use tab instead of clicking in the textbox) Only problem is i dont know how to do this:
<MobileDatePicker
variant="outlined"
label="Date of birth"
disableFuture
openTo="year"
views={['year', 'month', 'date']}
format="dd/MM/yyyy"
value={dateOfBirth}
onChange={e => {
setDateOfBirth(e);
setDateOfBirthError(false);
}}
error={dateOfBirthError !== false}
helperText={dateOfBirthError}
fullWidth
/>
anyone know how i can get this datepicker to open when i press tab?
You can use onFocus and controlled open prop in order to open it onFocus
But you likely want to have an accessible version of DatePicker so you can use v4.0.0-alpha version and DesktopDatePicker or just DatePicker in order to achieve built-in a11y
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} />