I am working on react-bootstrap overlay popover control. I only want the popover message to trigger when the mouse pointer is hovering over the icon. When I click on the icon, I get the dialog modal but I also get the message which will not hide until I click again.
Here is my jsx code
<OverlayTrigger
placement="top"
trigger="hover"
overlay={(
<Popover id="test">
test message
</Popover>
)}
>
</OverlayTrigger>
at first, I tried no trigger, still the click triggers the hover text. Next, I added trigger={'hover'},
thinking if I specify only hover as the trigger, but click is still working and activating the hover text.
How can I get only mouse hover to be the only trigger and not click? The click is reserved for onclick to bring up the modal.
Thanks
after reading react-bootstrap webpage, I added the working code
Related
I'm working on a Chatbox styling using MUI and I've a issue. I'm not able to interacting with the background elements when the Dialog is open. I'm only able to click on the Dialog content but not able to click on the background Form Component.
herer is he codesandbox link :
https://codesandbox.io/s/stupefied-snowflake-jolyw7?file=/src/components/Chatbox.js
in the Console I Change the z-index to 1 it worked but not able to interact with the foreground component that is chatbox.
You have to first close the modal then you would be able to make any changes in the background form.
Checked your code and found that outside click is not working the modal is is not hiding , with this you're unable to use the form.
change Dialog material UI to this :
<Dialog
disableScrollLock
disableEnforceFocus
hideBackdrop
onClick={handleClose}
aria-labelledby="customized-dialog-title"
open={open}
transitionDuration={{ enter: 500, exit: 500 }}
// scroll="body"
sx={{
paddingLeft: "50%"
}}
>
With this when you click in background form element , First the modal pop up will close and then you can make changes in the form.
Hope this helps !
I am working with mapbox react gl - It is working pretty nice so far... except one thing.
The user can add their hometown location to the map. When the hometown location appears, it can be clicked to view a popup. I want the user to be able to remove the location from the map from inside the popup - So I added a function that removes the location from the database when a button is clicked. The problem is when the button is inside the popup the function doesn't fire - and I have no idea why.
I have messed with the z index of the button but it seems like whenever the button is clicked, the onClose function is being called instead of my handleDeleteHome function...
Edit* If I remove the onClose function, the handleDeleteHome function fires.
Any help is appriciated! Thanks!
{selectedHome && (
<Popup
latitude={bandLocation[0]}
longitude={bandLocation[1]}
onClose={() => {setSelectedHome(null)}}
offsetLeft={23}
offsetTop={-10}
>
<div>
<h4>Home Town</h4>
<Button
onClick={(e) => {
e.preventDefault()
handleDeleteHome()
}}
color="danger">x</Button>
</div>
</Popup>
)}
Alright! Figured it out - If anyone else needs to know:
You need to add closeOnClick={false} to the popup!
I am trying to add a button to the Material UI autocomplete paper by overriding the PaperComponent prop and added a button at the button of the paper, but clicking on the button automatically closes the autocomplete search results
How can i prevent the autocomplete search results Paper from closing on click
Here is a sandbox: https://codesandbox.io/s/material-demo-mxjyi
UPDATE: I didn't notice that the sandbox did not save, now you can see the issue
The problem is the onBlur which occurs before your onClick. Material UI offers to ignore the blur behaviour on debug mode but that happens only if you have a value inside your Autocomplete.
The workaround is to use onMouseDown instead of onClick
Based on your Codesanbox please change the onClick event to onMouseDown event in your <button> component
<button
style={{ margin: "10px", padding: "5px" }}
onMouseDown={() => alert("clicked")}
>
The problem, which is not Material-UI related, was discussed here also
using onMouseDown on the button is not the proper solution here as the user is expecting a different behavior. You can call preventDefault on the paper component to prevent it from closing.
<Autocomplete
//other props...
PaperComponent={(props) => (
<Paper onMouseDown={event => event.preventDefault()}>
<Button>Click</Button>
</Paper>
)}
/>
I remade the simple popover example on this page except using mouse hover props:
https://codesandbox.io/s/eager-dewdney-yt3v-yt3vb
<Button
variant="contained"
onMouseEnter={e => setAnchorEl(e.currentTarget)}
// onMouseLeave={() => setAnchorEl(null)}
>
As soon as onMouseLeave is uncommented the above code sandbox will break silently. The UI will appear fine but the popover will not display. I have found the same to happen in my actual project.
Commenting onMouseLeave will at least allow onMouseEnter to work correctly with the popover, but it is then stuck on screen.
Am I not using onMouseLeave correctly here?
If it is being used correctly but appears to be a library related bug, what mouse based alternative could be used in place of onMouseLeave above?
I ran into the same issue, and I did not want to use a Tooltip.
The fix is to add a style to the popup to suppress the additional onMouseLeave() event that gets fired right after the popup opens:
<Popover
style={{ pointerEvents: 'none' }}
>
{children}
</Popover>
I found the fix here.
I want the OverlayTrigger to be able to dismiss the Popover by both clicking outside the button and clicking on the button. However, when I set the trigger to be trigger={['click', 'focus']}, the Popover would flash and disappear when I click to button to show it.
getInitialState() {
return { show: true };
},
classificationPopover() {
return (
<ReactBootstrap.Popover id="popover" title="Popover">
Pop!
</ReactBootstrap.Popover>
);
},
render: function() {
return (
<div>
<ReactBootstrap.OverlayTrigger
trigger={['click', 'focus']} // Here is probably the tricky part
placement="right"
overlay={this.classificationPopover()}>
<ReactBootstrap.Button
bsStyle="default"
className="btn btn-default btn-circle">
<div className="btn-circle-text">?</div>
</ReactBootstrap.Button>
</ReactBootstrap.OverlayTrigger>
</div>
)
}
fiddle
This happens when you click outside the button, and then you click the button. But if you just click the button and close the popover with the button, things work fine.
I know that adding a RootClose property in OverlayTrigger and just keep "click" for trigger would work, but for my work requirement I'm not allowed to use RootClose, so I need a different solution. Thanks :D
For anyone attempting to use trigger with OverlayTrigger, please consider using Overlay instead.
The OverlayTrigger component is great for most use cases, but as a
higher level abstraction it can lack the flexibility needed to build
more nuanced or custom behaviors into your Overlay components. For
these cases it can be helpful to forgo the trigger and use the Overlay
component directly.
https://react-bootstrap.github.io/components.html#overlays
https://react-bootstrap.github.io/react-overlays/#overlay