Develop Reference

Custom ID not reflecting in MUI DialogTitle component

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.

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 ignore formSubmit by clicking Enter key in React hook based functional approach

I want to use "Enter" key for one of my input field. I am using Ant Design with React hook.
I have big form with child element and form submit functionality. Here is relevant part of the code,
<Form onSubmit={handlesubmit}>
<div className="column1">
<Form.Item>
<Text strong={true}>Supplier</Text>
</Form.Item>
</div>
<div className="column2">
<Form.Item>
<Input
onChange={handleChange}
name="supplier"
/>
</Form.Item>
</div>
<ChildElement/>
<Button
value="submit"
type="primary"
htmlType="submit"
style={{ float: 'right', marginBottom: '10px', marginTop: '10px' }}
>
submit form
</Button>
</Form>
Child component "ChildElement" also have an input submit field
<Input onChange={processArticleNumber} onKeyPress={(e) => (e.key === 'Enter' && fetchArticleData())}/>
When I press 'Enter' key after providing the input in the child element, the "fetchArticleData()" function of child is called but also the parent form is getting submitted which I want to avoid.
But I also want to keep "onSubmit" option on the parent form as I know that allows to submit the form with clicking "Enter" or any button with type "submit".
In class based react, I can specify "this.fetchArticleData" to correctly specify my Input element(from my child component in this case) on which I want this enter key facility but how to do that in function based React approach ?
Or do I need to use another form element inside my child ? for example,
<Form onSubmit={fetchData}>
<Form.Item>
<Input onChange={processArticleNumber}/>
</Form.Item>
</Form>
In the above case, is it a good idea to use "Form element" under a parent "Form element" ?
Any help is much appreciated.

Seems to me that what you need is to add event.stopPropagation(); in the child event handler.
This will prevent the event from propagating up.
Read: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

One way is to disable enterKey option to parent(your submit button) and enable only onClick for button.
You can achieve it by doing some code changes,
use form hook
const [form] = Form.useForm();
Add form to Form tag
< Form
name="basic"
form={form}
onFinish={}
onFinishFailed={}>
Remove htmlType="submit" and call onfinish like dis
< Button type="primary" onClick={form.submit}>
Submit
< /Button>
Still have any issue?, Refer my Codesandbox for removing enterkey option to antdesign form
https://codesandbox.io/s/formwithouthtmltypestackover-bpbhd?file=/index.js:1414-1494

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 /> }}
/>