Develop Reference

React Material UI - DataGrid Keeps Stealing Focus from Input Field

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.

How can I make a button be a label for hidden input in React with Material-UI?

So, I want to create a button to change avatar in my app. I use hidden file input and wanted to make a button to be a label for it, so user would click a button and choose the avatar instead of inputting to file input. Here is my code:
<Grid container spacing={2} direction="column" className={classes.avatarArea}>
<Grid item>
<Avatar alt={getCookie("name")} src={avatar} className={classes.avatar}>{getCookie("name").charAt(0)}</Avatar>
</Grid>
<Grid item>
<Input
style={{ display: 'none' }}
id="avatar-file-input"
type="file"
accept="image/*"
onChange={uploadAvatar} />
<label htmlFor="avatar-file-input">
<Button variant="contained" color="primary" className={classes.iconButton} startIcon={<CloudUploadIcon />}>Change avatar</Button>
</label>
</Grid>
</Grid>
However, button doesn't work as label. If I change button with, for example, avatar(so that user need to click on the avatar to change it), everything works great. So, it seems that the problem is with button itself.
How can I set up button as label for the input?

Can I choose which AntD icon to use with allowClear = true?

If I pass allowClear={true} to an AntD Input component, a small circle with an × appears at the end of the field once a user has typed something, which can be clicked to empty the contents of the field.
Is there some way to instruct AntD to use a different icon?
The AntD docs for reference: Input with Clear Icon

For current version 3.19.8 you can't.
The closest clean solution will be using Input.Group with revealing clear button on typing.
<Input.Group compact>
<Input
style={{ width: "80%" }}
onChange={e => setValue(e.target.value)}
value={value}
/>
{value && <Button onClick={reset} type="danger" icon="delete" />}
</Input.Group>;
Note: Should add animation on button reveal.

Yes, you can by passing prop to allowClear:
<Input
allowClear={{ clearIcon: <CloseOutlined /> }}
/>

How to change Material-UI TextField bottom color without using <MuiThemeProvider />

I have a Material UI TextField component that is on a dark background, so for just this one component, I'd like to change it so that the text and line colours are all red. The rest of the TextField instances should remain unchanged.
I am using #material-ui/core 3.8.1 and it's <TextField /> component.
I want to avoid having to use <MuiThemeProvider>
This is how I have tried based on the recommendation here for the Material-UI <Input /> component and the answer here
Reproduction: https://codesandbox.io/s/q9yj0y74z6

If you want to override the Input's classes, you'll have to use something like this:
<TextField
InputProps={{classes:{underline: classes.underline}}}
...
/>

Add this props in <TextField />
InputLabelProps={{
className: classes.cssLabels
}}
Add in styles
cssLabels: {
color: "red"
}

Cannot update state using react modal

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.