I am using the Ant Design components for some interfaces in a React App but I'm noticing an issue with Modals and Tooltips. Usually when the modal is empty or is simple - e.g has only a text it is going to show properly but in case there are more elements on it (on production scenario) it flickers.
You can visually watch the flickering issue here: https://drive.google.com/file/d/1ODsj-aGz6saHJLXLI7sJaesgHKKPrvD2/view
Hope to get some answers :-) Thank you!
The visibleRequest state variable is triggered true by a button in the interface.
EDIT: As requested here's my code:
renderRequests=()=>{
const data = [
{name:"Request #1",description:"Request description",status:"0"},
{name:"Request #1",description:"Request description",status:"1"},
{name:"Request #1",description:"Request description",status:"2"}
];
const handleOk = ()=>{
console.log("Submitted");
this.setState({visibleRequest:false})
}
const handleCancel = ()=>{
this.setState({visibleRequest:false})
}
return(
<div style={{overflowY:"scroll"}}>
<Modal
title="Submit new request"
visible={this.state.visibleRequest}
onOk={handleOk}
onCancel={handleCancel}
>
<Input placeholder="Title"/>
<Input.TextArea placeholder="Description"/>
<DatePicker/>
</Modal>
<List
dataSource={data}
renderItem={item=>{
return(
<List.Item>
<List.Item.Meta
title={item.name}
description={item.description}
/>
{item.status==1?<Tooltip title="Request approved">
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
</Tooltip>:
item.status==2?<Icon type="close-circle" theme="twoTone" twoToneColor="#7F1C43" />:<Icon type="ellipsis" theme="outlined" />}
</List.Item>
)
}}/>
<Pagination total={20}/>
</div>
)
}
Related
I am using react slick for making slides of poll. I am facing issue while clicking the poll option. Click gets fired after two clicks.
I think touch start is the issue here.
Not sure if it's like your code but the console logs the text when I click on the first image:
const ReactSlick = (props) => {
var settings = {
dots: true
};
return (
<div className="container">
<Slider {...settings}>
<div>
<img onClick={() => console.log("Clicked !")} src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
</Slider>
</div>
);
}
```;
I'm trying to get a React Booststrap Modal working inside a container I've tried in many different ways but I'm not getting it to work inside the container (div), I honestly don't know why.
The code is a little long, so I will let you a snippet of the code.
MisListas.js
function MisListas() {
const listContainer=useRef(null)
return (
<div ref={listContainer}> //Here is the ref
// Some Code
<Row xs={2} sm={3} md={4} lg={4} xl={5}>
{search && search.map(product =>{
return (
<ListProduct
product={
{
...product,
BasePrice: product.Price,
FinalPrice: product.Price
}
}
container={listContainer}/>
)})}
</Row>
</div>
)
}
Product.js
This is the Modal:
function Product({product,container}) {
return(
<div>
<Modal
show={isOpen}
onHide={handleClose}
container={container.current}
backdrop={false}
enforceFocus={false}
className="modal-clase-productList"
>
//Some Code
</Modal>
</div>
)
}
This is a simplified version of the code. As you can see I am passing the ref (listContainer) as the container of the modal as container.ref. But the modal keeps taking the whole screen when it opens.
Any idea how can I make it work?
So basically I'm trying to tie in the Login and Sign Up component to the Main component by making use of onClick action of a button.
Given below is the code segment
function Dev({value}){
const [isButton, ButtonClicked ] = useState(false);
const handleClick=()=> ButtonClicked(!isButton);
return(
<div>
<Card>
<CardImg top width="100%" src={value.src} alt="Card image cap" />
<CardBody>
<CardTitle className='text-card'>{value.title}</CardTitle>
<CardText className='text-text'>{value.text}</CardText>
<Button className='text-button' onClick={handleClick}>{value.button}<i class={value.icon} aria-hidden="true"></i></Button>
</CardBody>
</Card>
{isButton && (value.id ? <Login open={true} /> : <Sign open={true}/>)}
</div>
);
}
The code works fine, but there is an issue.
When I first click on the button, isButton will be set to true and the Login component will pop up. After closing it, I have to click twice on the button to render the Login component again.
I know the reason behind this; when I click on the button the second time isButton will be toggled to false and I should click again to toggle it to true. This is kind of inappropriate, is there any way to work around this issue?
The code for Login Component
const Login = (props) => {
const [modal, setModal] = useState(props.open);
const toggle = () => setModal(!modal);
return (
<div>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Login</ModalHeader>
<ModalBody>
.
.
.
</ModalBody>
</Modal>
</div>
);
}
export default Login;
I hope you're all well.
I would be so grateful if any of you can shed some light on the following question..
There are two relevant components:
Parent component which fetches data using GraphQL
let authors = "";
const { loading, data } = useQuery(FETCH_AUTHORS_QUERY);
console.log(`Loading: ${loading}`);
//console.log(data);
if (data) {
authors = { data: data.getAuthors };
}
return (
<Grid columns={3}>
<Grid.Row className="page-title">
<h1>Recent Essays</h1>
</Grid.Row>
{loading ? (
<h1>Loading essays..</h1>
) : (
authors.data &&
authors.data.map(author => (
<Grid.Column key={author.id} style={{ marginBottom: 20 }}>
<AuthorCard author={author} />
</Grid.Column>
))
)}
<Grid.Row></Grid.Row>
</Grid>
);
}
const FETCH_AUTHORS_QUERY = gql`
{
getAuthors {
id
Author
Description_1
Description_2
}
}
`
Child component called 'AuthorCard' (you can see placed in the parent component above):
function AuthorCard({ author: { Author, Description_1, id } }) {
const [writer, setWriter] = useState();
return (
<Card fluid>
<Card.Content>
<Image
floated="right"
size="mini"
src="https://image.cnbcfm.com/api/v1/image/105691887-1556634687926ray.jpg?v=1576249072"
/>
<Card.Header>{Author}</Card.Header>
<Card.Meta as={Link} to={`/essays`}></Card.Meta>
<Card.Description>{Description_1}</Card.Description>
</Card.Content>
<Card.Content extra>
<Button as="div" labelPosition="right">
<Button color="teal" basic>
<Icon name="heart" />
</Button>
<Label basic color="teal" pointing="left"></Label>
</Button>
<Button labelPosition="right" as={Link} to={`/essays`}>
<Button
color="blue"
basic
key={Author.id}
onClick={() => setWriter(Author)}
>
<Icon name="comments" />
</Button>
</Button>
</Card.Content>
</Card>
);
}
export default AuthorCard;
The issue is as follows:
When I click the as={Link} to={/essays} button in the child component, I would like to 'setWriter' state to the individual Author whose button I am clicking on.
However, I am not able to specify the individual author whose button is being clicked on. React thinks I want to 'setWriter' for the entire list of authors. For example, when I console.log(Author) within the button, I can see every author in the list printed in the console.
I have tried adding id, using event.target .value, and onChange instead of onClick.
I just haven't been able to target the individual author in order to update the state (which will be needed in a different component).
Please let me know if anything isn't clear or if it would be helpful to provide more details.
Thanks in advance and happy coding!!!
Dan
You should use a destructuring assignment expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
I think you should declare your child component like this:
function AuthorCard({ Author, Description_1, id }) {
...
...
...
}
Thanks for the reply.
I finally solved the issue. I had to use:
onClick={e => setWriter(e.currentTarget.Author)}
I hadn't known about using 'current target.'
I can then transfer the state to other components through useContext.
Hopefully this can help someone else!
Dan
I am getting this error when I open a modal on my React app but I can't figure out what it means or how to fix it.
"Warning: Material-UI: the modal content node does not accept focus.
For the benefit of assistive technologies, the tabIndex of the node is being set to "-1"."
<SettingsModal event={this.state.eventDetails} id={this.state.eventDetails.id} delete={this.handleRemoveEvent}/>
returns:
return(
<>
<Paper className={classes.SettingsModal}>
<h1>{this.props.event.name}</h1>
<p>{this.props.event.description}</p>
<p>{this.props.event.id}</p>
<Button onClick={(e) => this.props.delete(this.props.event)}>Delete Event</Button>
</Paper>
</>
);
I've found fix! To remove this error you should wrap your Modal content with DialogContent component like this
import DialogContent from '#material-ui/core/DialogContent';
// ...
render () {
return (
<Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
<DialogContent>
{this.state.modalContent}
</DialogContent>
</Modal>
);
}
All the credit goes to #Idos's comment above since he found the reference to the GitHub Issue. I found that this specific comment was useful.
The wrapping element of the Modal Contents needs to have a prop of
tabIndex: {-1}
In your case looks like you need to do the following:
return(
<Paper tabIndex:{-1} ...>
...
</Paper>
);
i had the same problem. apparently wrapping a div around SettingsModal should fix it.
Following #Wolfman comment, I just used Fragment from React, because it doesn't add any DOM element:
render () {
return (
<Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
<>
{this.state.modalContent}
</>
</Modal>
);
}
Even though, I still don't understand that issue :/