Material UI ReactJS :does material UI support any autofocus feature on the popovers.
I want to set the focus on the popover, as soon as the material UI popover opens.
MaterialUI Popovers inherit the Modal API. Supposedly the disableAutoFocus property allows NOT focusing on Popover/Modal content, however I also am experiencing it NEVER focusing in the first place.
https://material-ui.com/api/modal/
On what do you want to set the focus ?
The "autoFocus" property should be set on some Popover content childs.
For example, we use the "autoFocus" property of Material-UI TextField for this :
https://material-ui.com/api/text-field/
Add the autoFocus property to the first form element in your popover.
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
>
<input type="text" autoFocus />
<Typography className={classes.typography}>
The content of the Popover.
</Typography>
</Popover>
https://stackblitz.com/edit/qbx44l?file=demo.js
Related
How to collapse Modal Material UI?
I'm using a Modal component mui and want to collapse the modal window? Tell me how to do it?
You mean close it?
Well, if that's the case this is how you do it.
<Dialog
onClose={() => setModal(false)}
>
<your divs here/>
</Dialog>
I am using Material-UI in one of my ReactJS projects.
I have a few buttons: some - primary, the rest are secondary. What I want to achieve is to disable the tabIndex property on secondary buttons, leaving only the primary buttons accessible with the keyboard tab.
Turns out setting tabIndex attribute to the Button component does not work, nor setting the tabIndex via inputProps:
<Button
variant="contained"
tabIndex="-1" //does not work
size="small"
startIcon={SearchIcon}
color='secondary'
inputProps={{ tabIndex: "-1" }} //does not work either
> some text
</Button>
How do I achieve disabling the accessibility of the secondary buttons via keyboard tab?
I can't set tabindex attribute to an element via CSS, can I?
Any help would be appreciated.
Thank you.
for textfield and input you must code like this
<TextField label="1" inputProps={{ tabIndex: "1" }} />
for button your code must be like this
<Button tabIndex="2">Button 2</Button>
I just went through this on the MUIv5 update. For me, using braces worked:
<Button tabIndex={2}>Button 2</Button>
Material-UI input elements like TextField are not working / can not get the focus if they are inside a Popper inside a Dialog.
<Dialog open={true}>
...
<Popper open={true} style={{zIndex: 1500}}>
...
<TextField />
...
</Popper>
...
</Dialog>
The zIndex value for the Popper element is necessary to display Popper in front of the Dialog element.
Simple codesandbox example: https://codesandbox.io/s/input-inside-popper-inside-dialog-not-working-9y7rg
You can use the disableEnforceFocus property on Dialog (inherited from Modal) to fix this.
<Dialog open={true} disableEnforceFocus>
<SimplePopper />
</Dialog>
Related answer: CKEditor 4 having problem when used in Material UI dialog
i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
Is there any way to trigger the DatePickerDialog to open using an external control / button other than the built in input that comes out of the box with the DatePicker?
We are using the material-ui library.
Since the dialog open state is handled internally by material-ui components, the only way to do it would be using ref in the DatePicker and calling focus(). Kind of a hack - but it works..
Example:
<DatePicker
ref='datePickerStartDate'
errorStyle={componentSyles.error}
textFieldStyle={componentSyles.textField}
DateTimeFormat={Intl.DateTimeFormat}
cancelLabel={cancelLabel}
autoOk={true}
{...this.props}
/>
<FontIcon
onClick={(e) => { this.refs.datePickerStartDate.focus() }}
className="material-icons" style={componentSyles.icon}>
date_range
</FontIcon>