I have this Button in my React application:
<Button
onClick={this.showReissue}
primary={true}
fullWidth={false}
disabled={this.state.disableButton}
>
this.state.disableButton is a boolean value.
Is there any way I can add a tooltip that is only active if the button is disabled?
I guess it would be something like this
<Tooltip title={disableButton == true ? "" : "test"}>
<Button
variant="outlined"
onClick={showReissue}
primary={true}
fullWidth={false}
disabled={disableButton}
>
Test
</Button>
</Tooltip>
here is a link to try it (I used MUI but the logic is the same)
https://codesandbox.io/s/exciting-germain-dumokw?file=/src/App.js:373-651
I get inspired from this answer
just add the same conditional to the tittle attribute like so
<Button
onClick={this.showReissue}
primary={true}
fullWidth={false}
disabled={this.state.disableButton}
title={this.state.disableButton ? "your tooltip":""}>
Related
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>
I have a button which gets enable and disable based on condition, I want to add tooltip to a disable button. Which I am not getting how to do using reactstrap.
<Col sm={6}>
<Button
type="button"
id = {`button-${companyId}`}
disabled={
this.company[companyId] &&
this.company[companyId].length
? false
: true
}
title = {this.company[company.id].length < 1? // As a makeover i Used title
"Not Active" : ""}
style={{ marginLeft: "-16px" }}
>
</Button>
User list
{this.company[companyId].length < 1 ? (
<UncontrolledTooltip
target={`button-${companyId}`}
placement="bottom"
fade={false}
>
"Active"
</UncontrolledTooltip>
) : null}
</Col>
But this does not add tooltip to the button. Can anyone please suggest what I am doing wrong here.
I recomend you to use condition like this ;
<Button
color="secondary"
size="lg"
disabled={(this.company[companyId] && this.company[companyId].length) ? false: true}>
Button
</Button>
Or disabled={!(this.company[companyId] && this.company[companyId].length)}>
Using antd for adding an dropdown menu.Its not closing on mouse leave and click of an item inside dropdown.it remains open in the same place when page is scrolled.
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["click"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
It's because you have mentioned click as trigger. remove this prop so default will be hover or add hover
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["hover"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
I have an app built up with React and Material UI. Within one view it is possible to have several text fields and several buttons. Now, when I have the focus on one text field and then press Tab I cannot reliably anticipate which one of the controls will be the next one to get the focus. I want to first tab through all the text fields and then secondly tab through all the buttons.
<DialogContent>
<DialogContentText>
The username and password that were used are incorrect. Please provide the correct credentials in order to login to the API.
<Stepper activeStep={this.state.credentialsStep} orientation='vertical'>
{
this.steps.map((label, index) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>{this.stepContent[index]}</Typography>
{this.stepAction[index]}
<Grid container direction='row' className='m-t-26'>
<Button color='primary'
onClick={() => {
this.state.credentialsStep === 0 ? this.onClickCancel() : this.onClickBack();
}}>
{this.state.credentialsStep === 0 ? 'Cancel' : 'Back'}
</Button>
<Button variant='contained'
color='primary'
onClick={() => {
this.state.credentialsStep === this.steps.length - 1 ? this.onClickLogin() : this.onClickNext();
}}>
{this.state.credentialsStep === this.steps.length - 1 ? 'Login' : 'Next'}
</Button>
</Grid>
</StepContent>
</Step>
))
}
</Stepper>
</DialogContentText>
</DialogContent>
Is there a way to set the tab order of controls?
You can control this with the tabIndex property, but you may be better off to figure out how to have the elements appear in the source in the order you would want the focus to go.
I have found this resource handy: https://bitsofco.de/how-and-when-to-use-the-tabindex-attribute/
When to use a positive tabindex value
There is almost no reason to
ever use a positive value to tabindex, and it is actually considered
an anti-pattern. If you’re finding the need to use this value to
change the order in which elements become focusable, it is likely that
what you actually need to do is change the source order of the HTML
elements.
One of the problems with explicitly controlling tabindex order is that any elements with a positive value are going to come before any other focusable elements that you haven't explicitly put a tabindex on. This means that you could end up with very confusing focus order if you miss any elements that you would want in the mix.
If you want to have the button on the right come before the button on the left in the focus order, there are various CSS options that would allow the button on the right to come first in the source order.
If, however, you decide that explicitly specifying the tabindex is your best option, here is an example showing how to do this for TextField and Button:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import Button from "#material-ui/core/Button";
function App() {
return (
<div className="App">
<TextField label="1" inputProps={{ tabIndex: "1" }} />
<br />
<TextField label="3" inputProps={{ tabIndex: "3" }} />
<br />
<TextField label="2" inputProps={{ tabIndex: "2" }} />
<br />
<Button tabIndex="5">Button 5</Button>
<Button tabIndex="4">Button 4</Button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
You may want to use the html attribute tabindex. This allows you to specify the order that tabbing will go through in your form. You can read more about it here and I've put a small example below, setting the tab index of your button to #1
<StepContent>
<Typography>{this.stepContent[index]}</Typography>
{this.stepAction[index]}
<Grid container direction="row" className="m-t-26">
<Button
tabIndex="1" // This will make the button the first tab index for the form.
color="primary"
onClick={() => {
this.state.credentialsStep === 0
? this.onClickCancel()
: this.onClickBack();
}}
>
{this.state.credentialsStep === 0 ? "Cancel" : "Back"}
</Button>
<Button
variant="contained"
color="primary"
onClick={() => {
this.state.credentialsStep === this.steps.length - 1
? this.onClickLogin()
: this.onClickNext();
}}
>
{this.state.credentialsStep === this.steps.length - 1 ? "Login" : "Next"}
</Button>
</Grid>
</StepContent>;
You can use a css trick to render the buttons in reverse order, but with css to reverse the buttons in UI.
<DialogContent>
<DialogContentText>
The username and password that were used are incorrect. Please provide the correct credentials in order to login to the API.
<Stepper activeStep={this.state.credentialsStep} orientation='vertical'>
{
this.steps.map((label, index) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>{this.stepContent[index]}</Typography>
{this.stepAction[index]}
<Grid container direction='row' className='m-t-26'>
// Box wrapper added <Box style={{ display: 'flex', flexDirection: 'row-reverse', justifyContent: 'flex-end' }}>
// First Button is now "Next in JSX <Button variant='contained'
color='primary'
onClick={() => {
this.state.credentialsStep === this.steps.length - 1 ? this.onClickLogin() : this.onClickNext();
}}>
{this.state.credentialsStep === this.steps.length - 1 ? 'Login' : 'Next'}
</Button>
<Button color='primary'
onClick={() => {
this.state.credentialsStep === 0 ? this.onClickCancel() : this.onClickBack();
}}>
{this.state.credentialsStep === 0 ? 'Cancel' : 'Back'}
</Button>
</Box>
</Grid>
</StepContent>
</Step>
))
}
</Stepper>
</DialogContentText>
</DialogContent>
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