DatePicker Overly hiding under modal using MUI with react - javascript

The Parent Component is MUI Page then modal which is also from MUI and then inside the modal, I'm rendering the DatePicker
// #mui
import { DatePicker } from '#mui/x-date-pickers';
That's how it is being rendered.
<Controller
name="createDate"
control={control}
render={({ field, fieldState: { error } }) => (
<DatePicker
label="Date create"
value={field.value}
onChange={(newValue) => {
field.onChange(newValue);
}}
renderInput={(params) => <TextField {...params} fullWidth error={!!error} helperText={error?.message} />}
/>
)}
/>
But the problem is that DatePicker overly displays under the modal. How can I make changes so that can be fixed?
I tried this question's solution but it didn't help. The reason might be these answers are not for the MUI DatePicker. So I need your help fixing this. Thanks.

change the zIndex for the modal component <Modal sx={{zIndex: 3}} ... >

Related

Unable to disable keyboard date change in MUI DatePicker API

Link to CodeSandBox : codesandbox.io/s/dl5jft?file=/demo.tsx
I don't want users to Edit dates via keyboard, I want them to select dates from date picker modal, how to disable this?,
i used the ReadOnly prop but it is disabling date selection itself, please help when i did readOnly, it is disabling the whole input, which made me unable to open the modal to select the date
<GlobalStyle />
<CalendarContainer>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
value={calendarVal}
onChange={(newValue) => {
handleChange(newValue);
}}
disabled={disabled}
inputFormat="dd-MM-yyyy"
renderInput={(params) => (
<TextField
// eslint-disable-next-line react/jsx-props-no-spreading
{...params}
name={name}
error={error}
disabled={disabled}
/>
)}
/>
</LocalizationProvider>
</CalendarContainer>
For preventing user keyboard actions, you can set the functionality of onKeyDown event to preventDefault and assign it to TextField:
const onKeyDown = (e) => {
e.preventDefault();
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={3}>
<DesktopDatePicker
label="Date desktop"
inputFormat="MM/dd/yyyy"
value={value}
onChange={handleChange}
renderInput={(params) => (
<TextField onKeyDown={onKeyDown} {...params} />
)}
/>
)
For me, in latest #mui 5, the other solutions weren't working properly.
The only solution that worked for me is:
<DatePicker
dateAdapter={AdapterDateFns}
renderInput={(params) => (
<TextField
{...params}
inputProps={{...params.inputProps, readOnly: true}}
/>
)}
/>
I have done 2 things to solve this:
1- set render input TextField to readOnly => no typing
2- add sx of TextField caretColor: 'transparent' => hide the caret
<DatePicker
renderInput={params => (
<TextField
{...params}
InputProps={{
readOnly: true,
sx={{
"& .MuiInputBase-input": {
caretColor: 'transparent'
}
}}
/>
)}
/>

Material UI Autocomplete list items have padding I can't get rid off

I have this Autocomplete component in a React app as:
<Autocomplete
placeholder="Enter Suburb"
id="custom-input-demo"
options={Suburbs.map((suburb) => suburb.suburb)}
onChange={(event,value) => addSuburb(value)}
onFocus={()=>scrollToSuburb()}
defaultValue={customer.suburb ? customer.suburb : ''}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input style={{ width: 300 }} placeholder="Type.." type="text" {...params.inputProps} />
</div>
)}
/>
It appears with huge padding on the items as:
Render screenshot
I tried every possible way to alternate this style but wasn't able to.
What is the best way to style the Material UI react Autocomplete list?

OnBlur closing react component if clicked inside

I have created a React component using Material UI as below
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handleToggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
In the above component i have MenuList and TextField. I tried to add onBlur={handleToggle} thinking that, it will close the component if clicked outside of it but its closing even when i am trying to add text in TextField using onChange={getStudent}, Why is it happening and how to close Component only if clicked outside of it? Thanks.
You can use ClickAwayListener component to detect whether the user is clicking outside of the Popover area.
<ClickAwayListener onClickAway={() => setOpen(false)}>
<span>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</span>
</ClickAwayListener>
Live Demo

React Natvie buttons and textInput not working

Since the <Modal> in React Native is kinda iffy, I've made my own with a <View> that renders when this.state.display is true. But the text input and button doesn't do anything when clicked / interacted with.
I've tried using a regular <Modal> but prefer my way. As well as changing the actual style of the modal. I've added different onPresses and a few other minor code adjustments that haven't worked.
shouldRender() {
if (this.state.display) {
return (
<View style={styles.modal}>
<TextInput
placeholder="Event Title"
onChangeText={title => this.setState({title})}
value={this.state.title}
style={styles.textInput}
/>
<TextInput />
<Button />
<Button /> //the other buttons and textinput has similar things
</View>
);
} else {
return <View></View>;
}
}
In the render method:
return(
<TouchableOpacity
onPress={this.addReminder}
style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)
And the addReminder method just sets this.state.display to true
I'm looking for the buttons to submit / close the modal and the text input to change the title and text state. Right now, the buttons don't animate on press and the text inputs can't be clicked.
Also, prior to the modal, when the textinputs where just on screen, everything worked fine.
Your description sounds like an issue with zIndex - something is being rendered over top of your modal if the button opacity and input focus are not working.
I would try moving the <View>{this.shouldRender()}</View> to be the final child in the containing <View> in your render method and if that doesn't work then up the zIndex.
You can do something like this inside your render()
render(){
return(
<Modal visible={this.state.display} style={styles.modal}>
<TextInput
placeholder="Event Title"
onChangeText={title => this.setState({title})}
value={this.state.title}
style={styles.textInput}
/>
<TextInput />
<Button />
<Button /> //the other buttons and textinput has similar things
</Modal>
<TouchableOpacity
onPress={this.setState({display: true})}
style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)
}
this modal will only display if this.state.disaply == true

React select can not overlay react modal

I have a react modal and inside it I have react-select. How can I make select overlay the modal because some of my options in the botttom of modal did not appear ?
I tried z-index but it did not work.
<MainSelect
className="select"
id={name}
isMulti
isRtl={!locale.ltr}
components={{ Option: OptionComponent }}
styles={this.customStyles}
theme={this.customTheme}
options={options}
value={value}
placeholder={placeholder}
onChange={this.handleChange}
onBlur={formik.onBlur}
onMenuOpen={() => {
if (setScroll) setScroll();
this.props.formik.setStatus("onMenuOpen");
}}
/>
The issue here is the default style of React Modal i.e overflow:hidden. And React-modal allows you to easily override default styles. Just add overflow: visible to the modal's CSS.
<Select
menuPortalTarget={document.body}
styles={( menuPortal: base => ({ ...base, zIndex: 9999 }) )}
/>

Categories