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.
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 !
im using the antd model to popup a visual. I need to remove the cancel and Ok button but keep the X button working so that i can close the popup using that button.
i removed the Cancel and Ok button using below code but after that clicking on X is not working and can't close
<Modal
title="Lost Assets"
visible={isModalOpen}
width="95%"
style={{ top: "20px" }}
bodyStyle={{ height: "calc(100vh - 170px)" }}
footer={null}
How can i make the X button workable and make it a little bit large in size?
Remove the below two buttons and keep the top X workable.
If you check the antd documentation for the Modal they have a prop called closable that, if you set to true, it will render the "x" button. To style it you just have to target it's css className or you can use your own "x" component by using the closeIcon prop on the Modal as well. For further reading you can go the original Docs
You can use the onCancel={handleCancel} method and set the value isModalOpen = false to hide the modal.
example:
const handleCancel = () => { setIsModalOpen(false) }
I need each question button when it is clicked to be disabled. I would also like to style each question button. I already looked for several answers to this problem but I found nothing. As I don't know much about React in this case, should I use useEffect or children.props? If you have any solution please let me know.
Demo
Your buttons' state is already available for each button, you just need to use state and disable button.
{/* Question buttons */}
{buttons.map((button) => (
<button key={button.id} disabled={button.clicked} onClick={() => buttonClickHandler(button.id)}>
{button.label}
</button>
))}
About styling buttons individually, you can create a className for each button and style buttons depending on that:
<button className={'button-' + button.id}>
and now from css apply color:
.button-01 { background: pink; }
The second approach could be that you create styles for each button inside the state, and consume it from there.
<button style={button.style}>
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 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