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 /> }}
/>
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.
sorry to ask this simple question but I'm new to React and I am trying to use the keyboard library from hodgef/react-simple-keyboard, along with Ant Design to try creating a login page. I pretty much followed the code sample from this Codesandbox Example and things works fine, until I replaced the default input tag into Ant-Design's Input component.
From this:
<input
id="firstName"
value={getInputValue("firstName")}
onFocus={() => setInputName("firstName")}
placeholder={"First Name"}
onChange={onChangeInput}
/>
Into this
<Form.Item
label={<text style={{ color: 'white' }}>Username</text>}
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
style={{ color: 'white' }}
>
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
</Form.Item>
After using Ant Design's Components, the input will not update anymore when I press the keyboard buttons.
Anyone in this community know what is the problem causing this? Is it because the <Input> is nested inside <Form.Item> , which made the ref not working anymore?
So if I were to use only input, without nested inside Form.Item it will still works:
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
Much appreciated if anyone could answer this stupid question, I'm really new and I don't even know what to search for to begin with, and really sorry for my poor English, I don't know how to explain or elaborate further.
Fixed by following this code sample from ANTD.
Basically I added following lines to call the form method.
const [form] = Form.useForm();
Then assigning the input values in the onChangeAll listener in the keyboard component as follows:
const onChangeAll = (inputs) => {
setInputs({ ...inputs });
form.setFieldsValue({
username: `${inputs.inputUserName}`,
password: `${inputs.inputPassword}`,
});
};
Also don't forgot to add this line in the Form component
<Form
form={form}
...
>
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 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"
}