I have created a simple form with https://material-ui.com/
Mt form has two fields:
I have implemented a form Dialog popup when user clicks in the "Booking name" field.
The problem is that my Dialog is partly covered by a keyboard. I want Dialog move up when keyboard is shown.
Any ideas how to fix it:
Here is my Dialoge code:
<Dialog open={this.state.booking_name_dialog_open} aria-labelledby="form-dialog-title" maxWidth={"lg"} fullWidth={true}>
<DialogTitle id="form-dialog-title">Booking name:</DialogTitle>
<DialogContent>
<TextField autoFocus margin="dense" id="name" label="Booking name" type="text" fullWidth/>
</DialogContent>
<DialogActions>
<Button color="primary">Cancel</Button>
<Button color="primary">Submit</Button>
</DialogActions>
</Dialog>
Any help is welcome!
You can wrap your form inside core component from react-native
import {keyboardAvoidingView} from 'react-native';
<KeyboardAvoidingView>
<form>
</form>
</KeyboardAvoidingView>
Hope it helps.
So, the problem was because of StatusBar plugin. Just don't use it and you won't have such a problem.
You can try using 'cordova-plugin-ionic-keyboard' plugin https://github.com/ionic-team/cordova-plugin-ionic-keyboard and check whether it solves.
Related
Is it possible to have a nested form inside a larger form using React-Hook-Form?
I have a larger form component that I want a button to cause a MUI Dialog component to display with a mini-form inside it that will have its own validators. When data is successfully added on the dialog form it should add that data to the table.
Table details aren't important here, what I need to know is if the nested/internal form is possible. I've seen posts about two forms in a component like <form/><form/> but none about yup validation in nested forms like <form><form></form></form>.
Roughly it would look like below.
<Box component="form" onSubmit={handleSubmit(handleOnSubmit)}>
//Parent form fields here
<Table/>
//button and dialog are in a separate .jsx component
//but left here for demonstration purposes
<button onClick={openDialog}>Add</button>
<Dialog
fullScreen={fullScreen}
open={open}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<Box component="form"
onSubmit={handleSubmit2(handleOnSubmit2)}>
<DialogTitle id="responsive-dialog-title">
Fill out fields
</DialogTitle>
<DialogContent>
<FormControl fullWidth size="small">
<Controller
control={control2}
name="identifier"
render={({ field, formState }) => (
<>
<TextField
{...field}
size="small"
autoFocus
id="identifier"
label="Identifier"
fullWidth
/>
<FormHelperText error>{" "}</FormHelperText>
</>
)}
/>
</FormControl>
//other fields
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose}>
Disagree
</Button>
<Button variant="contained" type="submit" autoFocus>
Save
</Button>
</DialogActions>
</Box>
</Dialog>
</Box>
I've tried using separate useForm on each but it looks like validation is still connected with each other. So the parent form gets validated and blocks submit of the child form if it fails.
Would it be better to not use React-Hook-Form for the internal form? I thought about the useFieldArray but it doesn't seem like the appropriate use in this case as I want separate validation and not be able to change the fields after submitting the inner form.
Is this even possible and if so, is it not-recommended?
When using a Textfield as the first child of DialogContent:
export default function App() {
return (
<Dialog open={true}>
<DialogTitle>Hey</DialogTitle>
<DialogContent>
<TextField
fullWidth
id='name'
label={'Foo'}
name='name'
required
type='text'
value={'Bar'}
/>
</DialogContent>
</Dialog>
);
}
its label (when using `variant="outlined") gets clipped. See codebox sample. Any way to fix this problem? e.g. by customizing the theme?
You can easily fix that issue by adding some margin to the TextField like the following.
sx={{ marginTop: 2 }}
Or you could wrap the TextField using Box inside the DialogContent like the following.
<Box p={1}>
<TextField
...
/>
</Box>
I'm trying to create a form inside modal using react class component and antd, but i couldn't find a way to get the data submited in the form. i tried to console the event of the onOk in antd modal but i same no data.
i also found an example but it was with function component and hooks Form.useForm()
here is the simple if anyone can help : Simple
any hint will be helpful thanks.
The solution is to hide the footer of the modal and add submit for the form exemple :
<Modal
title={this.props.formTitle}
visible={this.state.modalVisible}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}
footer={[]}//this to hide the default inputs of the modal
>
<Form
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
onFinish={this.handleOk}>
<Form.Item
name="title"
label="Title"
rules={[
{
required: true,
message: 'Please input the title of collection!',
},
]}>
<Input />
</Form.Item>
<Form.Item name="description" label="Description">
<Input type="textarea" />
</Form.Item>
<Form.Item name="modifier" className="collection-create-form_last-form-item">
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
//this is the submit of the form
<Button key="submit" type="primary" loading={this.state.confirmLoading} htmlType="submit">
submit
</Button>
</Form.Item>
</Form>
</Modal>
I tried this out myself with limited TS(JS) knowledge using Antd & React framework.
The steps are as follow.
construct an object e.g:
let obj1 = {
variableA : "",
variableB : ""
}
In your form body get the value using
<Form.Item ... onChange={(event)=>obj1.variableA=event.target.value}/>
In this case, the event keyword will return the final input value to instances (e.g variableA) within obj1 with given input from different form, which you can operate on after the form submission finish in a quasi-java style.
You can test it by creating alert(obj1.variableA) or console.log function to see if that's the desired value, in my case it works well with string and numeric input.
As I am not doing front end, so I might make mistakes and do feel free to point it out.
I'm designing a basic form using react bootstrap and #material_ui/core elements
I've noticed if I press enter when I'm in one of the TextFields the URL is updated as follows:
originally:
http://localhost:8080/home
after pressing enter in TextField:
http://localhost:8080/home?listName=&welcome=&eventDate=
code in question:
<Form>
<Form.Group>
<TextField
name="listName"
variant="outlined"
value={this.state.listName}
onChange={this.handleChange}
label="Name of List"
fullWidth
/>
</Form.Group>
...
<Button variant="link" onClick={this.purchase}>Purchase</Button>
</Form>
The form and button are imported from 'react-bootstrap'
the textfield is from '#material-ui/core'
I've searched and haven't found anything directly related to this so any help in disabling this functionality on pressing Enter would be appreciated.
It means that your form is submitted when you press Enter. If you want to prevent form submission, add this prop to the form element (within your Form Component code):
onSubmit={event => event.preventDefault()}
I have recently started exploring Material UI and I have run into this strange behavior of a hintText in a TextField Component(the one from Material UI)
This is my code:
/* in my component ... */
/* ... */
render() {
const actions = [
<FlatButton
key="1"
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
key="2"
label="Submit"
primary
type="submit"
onTouchTap={this.handleSubmit}
/>
];
return (
<div>
<IconButton
tooltip="Add Asset"
onTouchTap={this.handleOpen}>
<Add color={"#000"} />
</IconButton>
<Dialog
title="Add"
actions={actions}
modal
open={this.state.open}>
<form>
<TextField hintText="Type"
value={this.state.name}
onChange={this.handleName}/>
</form>
</Dialog>
</div>
);
}
So when I start typing in the textfield, the hinttext remains, resulting in unreadable text due to letters over another letters.
I would really appreciate it if someone could help me. :)
image
Try using placholder="Type" rather than hintText="Type".
The solution for this is that you will have to update the variable name in the function handleName everytime the user updates the field. So the complete code is:
<TextField
hintText="Type"
value={this.state.name}
onChange={this.handleName}
/>
and the function handleName:
handleName=(event)=>{
this.setState({name:event.target.value});
}
It should work. If not, let me know in the comments below!