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>
Related
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
I need to have a condition within style property of the button.
Here is how my code look like at this moment.
<Button variant="outlined" component="span" className={classes.button}>
Choose file
</Button>
I need to have condition something like this.
<Button variant="outlined" component="span" className={classes.button}
style={{display: ((this.props.filename === true)? 'none' : 'block') }}
>
Choose file
</Button>
Any idea how can I make this work?
Ref: https://material-ui.com/api/button/
You were very close. The only trick here is that by specifying === true in your condition will omit the type coercion on your variable, which is actually needed in this case as we want to check if the string is empty.
One fix for this would be to just remove it, and let JavaScript perform the type coercion, which checks if the string is empty or null:
<Button variant="outlined" component="span" className={classes.button}
style={{display: ((this.props.filename) ? 'none' : 'block') }}>
Choose file
</Button>
This post explains well how the conversion is done. More ways of checking for empty string in JavaScript, with coercion or not, can be found in this SO post.
I think the problem here is the same as described here:
Can withStyles pass props to styles object?
Another approach is to create a separate classes: displayNone- when condition is met, and displayBlock-when not. Then use the clsx library to combine the two classes, like so:
import clsx from "clsx"
<Button variant="outlined" component="span"
className={clsx(classes.button,this.props.filename? classes.displayNone:classes.displayBlock)}>
Choose file</Button>
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
I am trying to convert an older Material UI implementation. The Docs are bit laggy.
I get this error. The docs say
Name Type Default Description
children * node The content of the
button.
What does this mean and what do I have to put in my code?
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
</Button>
"children" are what is between the tags:
<Button>we are the children</Button>
Because you don't pass anything - it's undefined. To fix error just add something that React can render, like string:
<Button
variant="raised"
color="primary"
className={classes.Button}
label={this.state.buttonLabel}
onClick={this.handleClick}
>
My Button
</Button>;
Looks like they removed the label property and moved it to the children prop.
So you have to put it between the tags e.g.
<Button> here comes the label </Button>
You can always check the demos for the Components. See here
How do I get a material UI button to left align the label? There are no props to directly change the inline-styles on the button element and the only way I can figure to do this is to add a class and write some gross css selector like thisClass > div > button.
http://www.material-ui.com/#/components/raised-button
I had a similar issue with buttons that have an icon. I fixed it by justifing the content:
<Button
startIcon={<AccountCircleIcon/>}
fullWidth={true}
style={{justifyContent: "flex-start"}}>
button text
</Button>
You can give the label absolute positioning by using the labelStyle property on the element.
This works:
<RaisedButton
label="Primary"
primary={true}
lableStyle={{position: 'absolute',top: 0,left: -10}} />
Edit: Updating my answer with better ways to do this
Using text align on the button:
<RaisedButton
style={{textAlign: 'left'}}
label="Primary"
primary={true}/>
Using float on the label:
<RaisedButton
lableStyle={{float: 'left'}}
label="Primary"
primary={true}/>