I'm using a react modal which pops a form and asks for few user settings. I have two tabs where one is for user details and other for endpoint details. Everything works fine but when I'm trying to get the user input and put it in a state, I get errors.
First I tried sending the details on an onChange function and I tried changing my state there, but then it trips out the tab anytime I enter something on the input bar; then I tried just getting the user value using (e.target) but then I get an error saying that e is not defined.
I have properly initialized all the functions and binded them to .this as well. Any suggestions on how I can get the user value and update my state? Thanks!
(Cutting bit of the code since its too long and unnecessary.
<Modal
isOpen={this.state.showSettings}
onRequestClose={this.closeModal}>
<Tabs className="z-depth-1">
<Tab title="Endpoint Settings">
<div id="endpointSetting">
<br />
<h5>Please Enter Endpoint Settings</h5>
<div>
<form>
<Row>
<Col s={6}>
<p>URI for User Details: </p>
</Col>
<Col s={6}>
<input
id="modalInput"
name="user_uri"
placeholder="eg: localhost:3000/users"
/>
</Col>
</Row>
<Row>
<Col s={6}>
<p>URI for Traces Details: </p>
</Col>
<Col s={6}>
<input
id="modalInput"
placeholder="eg: localhost:3000/traces"
/>
</Col>
</Row>
</form>
</div>
</div>
</Tab>
</Tabs>
<button className="btn" onClick={this.closeModal}>
Save and Close Settings
</button>
</Modal>
Here is an example so you can understand Synthetic Events of Reactjs.
import React{Component} from 'react';
class App extends Component{
constructor(props){
super(props);
this.state={value:''};
this.myFn=this.myFn.bind(this);
}
myFn(event){
this.setState({value:event.target.value});
}
render(){
return(<div className="App">
<input onChange=({this.myFn}) type="text"></input>
<span>{this.state.value}</span>
</div>)
}
}
export default App;
So I figured that the onChange was obviously happening on each key stroke, and it was that which was messing up the tabs for some reason. I simply changed onChange to onBlur and voila, it worked. Dont know why the tabs were messing up.. Maybe because of MaterializeCSS.
Related
Edit: It's an issue in the library itself. Issue has been raised https://github.com/mui/material-ui/issues/36108
I want to assign a custom id to the <DialogTitle /> component of MUI.
But no matter what id we give it always take from aria-labelledby and put it under id of <DialogTitle /> component. And if we don't pass aria-labelledby then it takes some random id from MUI.
Could anyone tell me how to add a custom id to the <DialogTitle /> component ?
<Dialog
fullScreen={fullScreen}
open={open}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<DialogTitle id="test-custom-id">
{"Use Google's location service?"}
</DialogTitle>
</Dialog
I see only two options here:
Wrap your <Dialog /> with <Box id='my-custom-id' />
Add to <Dialog testId='my-custom-id' />
The value of the attribute aria-labelledby should be the same as your custom id. Updated example.
I am trying to implemented radio buttons in react. For each option of the radio button, it will have text input or dropdown as the input as well. I tried to use 'react-bootstrap/Form', however, it seems not allow me add input into the Form.check.
```<Form>
{['radio'].map((type) => (
<div key={`default-${type}`} className="mb-3">
<Form.Check type={type} id={`${type}-1`} label={`Within miles`} />
<Form.Check type={type} id={`${type}-2`} label={`Option`}>
<InputGroup className="mb-3">
<InputGroup.Text >Enter option</InputGroup.Text>
</InputGroup>
</ Form.Check >
</div>
))}
</Form>```
I am wondering how could I achieve the radio button with the text and dropdown input in react. The screenshot is the style I would like to achieve. Thanks.
I'm creating a React web application with Material-UI, and I'm running into a problem where my Material-UI DataGrid always steals the browser focus away from my search input field as I try to type in it. This problem does not occur right when I load the page. It only happens when I first click somewhere on the table to focus on it, and then click on the search bar and try to type something. Right as I type the first letter and the state of my page is updated, the focus goes to a cell on my table so I can no longer type in my search box without clicking on it again (and then the process repeats for each letter I type).
From my research, a lot of people have run into this issue because they are not putting proper keys on their React elements, so they lose focus on their input field whenever the state of the page changes. However, I've made sure to include keys on all elements that have sibling elements, which should take care of that from my understanding. I have also included the line: onKeyDown={(e) => e.stopPropagation()} in my InputBase field because I read on another Stack Overflow post that sometimes the DataGrid can intercept KeyDown events, but that didn't help either.
Snippet to make the issue clearer (zoomed in on top left of table + search bar)
Here is all the JavaScript code that encompasses my problem:
<Paper key="paperGrid">
<Grid key="contentGrid" container style={{paddingTop: 4, paddingBottom: 8}}>
<Grid key="searchGrid" item xs={4}>
<Paper key="searchPaper" component="form" className={classes.root}>
<InputBase
key="searchInput"
className={classes.input}
placeholder="Search Job Configs..."
inputProps={{ 'aria-label': 'Search Job Configs' }}
onChange={searchJobs}
onKeyDown={(e) => e.stopPropagation()}
/>
<IconButton key="searchButton" className={classes.iconButton} aria-label="search">
<SearchIcon />
</IconButton>
</Paper>
</Grid>
<Grid key="testing" item xs={2}>
<h3>Testing</h3>
</Grid>
</Grid>
<div key="dataGrid" style={{ height: '40vw', width: '80vw' }}>
<DataGrid
key="jobConfigsTable"
rows={filterJobList}
columns={jobColumns}
pageSize={25}
rowsPerPageOptions={[25, 50, 100]}
getRowId={(row) => row.psrunId}
checkboxSelection
/>
</div>
</Paper>
I was having the same problem. When the component rerendered, it would take focus back to the last clicked cell.
Using the state prop in DataGrid, I was able to fix this for my use case, but note this might have unintended consequences for you.
<DataGrid
state={{
keyboard: {
cell: null,
columnHeader: null,
isMultipleKeyPressed: false,
}
}}
Try using onSubmit rather than onChange in your <inputBase /> like so:
<InputBase
key="searchInput"
className={classes.input}
placeholder="Search Job Configs..."
inputProps={{ 'aria-label': 'Search Job Configs' }}
onSubmit={searchJobs}
onKeyDown={(e) => e.stopPropagation()}
/>
onChange triggers searchJobs every time your input changes. Changing it to onSubmit should trigger your search as desired.
I am using react-bootstrap but I am noticing some weird behavior on form submit.
I have a sign-in file which is a form in a modal
<Modal>
...
<Form
className="d-flex justify-content-center align-items-center flex-column"
onSubmit={onSubmitSignIn}
>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
placeholder="Enter email"
className={`signInputStyle ${
invalidEmail ? "invalidFieldStyle" : ""
}`}
value={email}
onChange={handleEmailValidation}
required
/>
<div>
<small className="errorFormText">
{invalidEmail ? "must be a valid email" : ""}
</small>
</div>
</Form.Group>
...
<div className="signupAcc">
Do not have an account?
<span onClick={() => setModalShow(true)}>SignUp</span>
<SignUp show={modalShow} onHide={() => setModalShow(false)} />
</div>
...
</Form>
</Modal>
In the sign-in component when you click on the SignUp span, it displays the second modal(which is for sign-up, therefore I have two modals now).
The sign-up modal has a form that is similar to that of the sign-in and they both have onSubmit function.
<Modal>
...
<Form
className="d-flex justify-content-center align-items-center flex-column"
onSubmit={onSubmitValue}
>
<Form.Group controlId="formGridFirstName1">
<Form.Control
placeholder="First Name"
required
name="firstname"
className={`signInputStyle ${
invalidateField.firstname ? "invalidFieldStyle" : ""
}`}
onChange={handleUserInput}
/>
<div>
<small className="errorFormText">
{invalidateField.firstname
? "must be at least three letters"
: ""}
</small>
</div>
</Form.Group>
...
</Form>
</Modal>
I noticed when I clicked on the button(type='submit') for the sign-up file it also triggers the onSubmit for the sign-in. My question is why is this behavior? Is it because both form fields are in the dom already? or something else? I really want to know the reason behind this behavior and how to resolve it. Thank you.
Make one of the buttons as type="button" and add an onClick action. the other one should work this way.
It is just native HTML button behaviour. As stated on the documentation, the button element contains the type attribute accepts 3 values: submit, reset, and button. If the type attribute is supplied with the submit value, it will
Submit the current form data.
Deep inside the hood of, React-bootstrap's Form Components, it probably makes use of the HTML Form Element, hence clicking on the button triggers the same mechanism for Form.submit().
If you do not want this behaviour, you may simply remove the type attribute ,or set the type attribute aas button (type="button").
I added the React.js context cause of the NavLink reference (from React Router) in the button I am trying to use. Either way, when I want to submit data with:
submitData(event) {
event.preventDefault();
alert("Submitted");
}
This will work:
<FormGroup>
<input type="submit" />
</FormGroup>
But this will not:
<FormGroup>
<Button type="submit" id="submitButton" color="primary"><NavLink to="/Confirm">Submit</NavLink></Button>
</FormGroup>
Not sure why the second won't work, but it is my preferred method. Any ideas or thoughts as to why? I know <button> is newer, but adding type="input" should force it ton work all the same.
The NavLink component is already listening to it's own submit/click event, which isn't propagating to your own form's onSubmit.
The easy solution would simply to bind the NavLink's onClick to your own handler:
<FormGroup>
<Button type="submit" id="submitButton" color="primary">
<NavLink to="/Confirm" onClick={this.submitData.bind(this)}>Submit</NavLink>
</Button>
</FormGroup>