I am trying to display a popover on click over a react-select selected value element as follow :
My issue happens when I click on the popover trigger, the dropdown opens and the popover too... I just want to open the popover, I tried e.nativeElement.stopPropagation, e.stopPropagation, e.preventDefault and so on without success. Here is a sandbox If you want to know how I did this and how to reproduce the issue.
https://codesandbox.io/s/pjv7vmlv3j
Thanks for you help
The react-select opens the dropdown as a reaction to onMouseDown event, not onClick and that's why any onClick={(e) => e.stopPropagation()} can't prevent to open the dropdown. You need to add onMouseDown={(e) => e.stopPropagation()} along with the onClick handler to open only the popover.
In your code the snippet below should do the trick:
<span onMouseDown={e => e.stopPropagation()} style={styles.root}>
<span style={styles.label}>{label}</span>
<OverlayTrigger
trigger="click"
rootClose
placement="bottom"
overlay={popover}
animation={false}
>
<span style={styles.trigger}>{`${selected} / ${contacts.length}`}</span>
</OverlayTrigger>
</span>
Well I found a way to cancel the event. I just add an onValueClick prop to the <Select /> and put the stopPropagation there!
Related
I am working on a react project. I am using reactstrap modal and ckeditr5 for the text editor (classicEditor) which is opening inside the modal. Issue is I can not type in input link field. I have found solution for similar issues with other frameworks like bootstrap and material ui. There is some issue with Modal autoFocus property therefore it does not focus on input field. But I can not solve this issue with "reactstrap" Modal and ckeditor5.
Here is the image of the issue which I am talking about
Code is here:
import {
Button,
Input,
InputGroup,
Modal,
ModalBody,
ModalFooter,
ModalHeader} from "reactstrap";
return (
<Modal
isOpen={this.state.textEditorToggle}
className="text_edit_model edit-model"
>
<ModalHeader toggle={this.toggleModal}>{fieldName}</ModalHeader>
<ModalBody>
<CKEditor
config={{
extraPlugins: [uploadPlugin],
}}
editor={ClassicEditor}
data={value ? value : ""}
onReady={(editor) => {}}
// onInit={(editor) => {}}
onChange={this.handleCk5change}
/>
</ModalBody>
<ModalFooter>
<div className="record_btn" onClick={toggle}>
<button>CANCEL</button>
</div>
<div
className="record_btn"
onClick={saveFun}
>
<button disabled={load}>SAVE</button>
</div>
</ModalFooter>
</Modal>
)
I have also checked with changing Modal with normal and changing accordingly, It is working fine but this problem is occuring only with reactstrap Modal. I believe it is related to focus of Modal but not sure how to solve it. Can someone help here?
Button onClick not executing the triggerThis function because it is wrapped with react-router-dom Link component
Expected behaviour: Card click should navigate to /app/url and on button click the url navigation should be prevented and should run triggerThis function.
I want onClick button prevent navigation. but when i click outside button the navigation should work .. triggerThis is a function that just console.log("hello")
<Card>
<Link to={`/app/url`}>
<h1>Title</h1>
<p>Paragraph</p>
<button onClick={triggerThis}></button>
</Link>
</Card>
You really shouldn't place interactive elements within other interactive elements, but if you want to allow the button to be independently clickable and not trigger the navigation of the wrapping Link component then you should stop the click event propagation. This prevents the click event from propagating further up the DOMtree to the Link element, thus preventing the navigation action from occurring.
Example:
const clickHandler = e => {
e.stopPropagation();
...
};
...
<Card>
<Link to="/app/url">
<h1>Title</h1>
<p>Paragraph</p>
<button onClick={clickHandler}>
...
</button>
</Link>
</Card>
Tried converting Tooltip to a controlled component which depends on onClick event
This works fine in mobile and web but it looses it's original behaviour to show Tooltip on hover
Is there a solution that makes Tooltip work both on hover and onClick
As part of styling
Wanted to have touch event for mobile
Wanted to have hover event for desktop to also work
But had difficulty making it working due to hover for mobile.
Making enterTouchDelay value to 0 worked on mobile, 700ms is default value:
import Tooltip from '#mui/material/Tooltip';
import Button from '#mui/material/Button';
<Tooltip title="Some message" enterTouchDelay={0}>
<Button>Some message</Button>
</Tooltip>
So ultimately we need a tooltip that works both on hover and onClick.
Default Material-UI tooltip works fine both on web and mobile.
<Tooltip title="Show Tooltip">
<Button>Long press for 1s to show tooltip on mobile</Button>
</Tooltip>
Long-pressing on mobile shows tooltip but it also opens the dailog box which opens when we right-click(ctrl + click on mac) on web. So it is not UX friendly.
So enabling onClick by not loosing the hover functionality is ideal for both web and mobile devices.
<Tooltip
title="I am tooltip"
open={showTooltip}
onOpen={() => setShowTooltip(true)}
onClose={() => setShowTooltip(false)}
>
<Button
variant="outlined"
color="primary"
onClick={() => setShowTooltip(!showTooltip)}
>
Hoverme to open Tooltip
</Button>
</Tooltip>
Click here for complete code snippet.
For mobile, the click solution seems the best.
The docs provides one example with it,
<ClickAwayListener onClickAway={handleTooltipClose}>
<div>
<Tooltip
PopperProps={{
disablePortal: true,
}}
onClose={handleTooltipClose}
open={open}
disableFocusListener
disableHoverListener
disableTouchListener
title="Add"
>
<Button onClick={handleTooltipOpen}>Click</Button>
</Tooltip>
</div>
</ClickAwayListener>
https://mui.com/components/tooltips/#triggers
I'm trying to use as a trigger of a Popup in React a button with custom theme:
<PopUp modal trigger={
<MuiThemeProvider theme={buttonTheme}>
<Button variant="contained" color="secondary">Excluir</Button>
</MuiThemeProvider>
}>
But when I do this, I get this error: "Failed prop type: The following props are not supported: onClick. Please remove them. in ThemeProvider" and "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?". I would like to stop the error.
The button gets colorful, but it doesn't open the Popup.
You just need to put the tag outside the trigger.
<MuiThemeProvider theme={buttonTheme}>
<PopUp modal trigger={<Button variant="contained" color="secondary">Excluir</Button>>}
</MuiThemeProvider>
I'm using Ant Design and React js for my Project.
Problem
I have a button in Popover and having click event for that button. The problem is button click event is not triggering.
JS Code
const content = (
<div className="RecurringPopover">
<button onClick={this.handleClick}> Popover Button </button>
</div>
);
Full Code with scenario in stackblitz
You have defined content outside the class and then supplying this.handleClick as a click handler to it. However outside class, this does not point to the class. You should define content inside class and use this.content to access that.
handleClick() {
alert('test');
}
// put it inside class
content = (
<div className="RecurringPopover">
<button onClick={this.handleClick}> Popover Button </button>
</div>
);
render() {
return (
<div>
<Row>
<Col span={12}>
// Use this.content instead of just content
<Popover content={this.content} title="Title">
<span type="primary">Hover me (Popover Button)</span>
Just bring the 'content' to inside the class, and pass it to component via 'this.content', it will work.