I am trying to implement a popup menu which closes after a button or a link is clicked with reactjs-popup library.
The documentation uses { close => (...content) } for modal but this approach doesn't work for popup menu.
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 want to build a registration web page in react, that has a checkbox, and a text along that checkbox. one word in the text is a link to a pdf file which is the terms and conditions for example. now, how can i show that pdf not as a new window tab opened, but instead in the same tab and in a modal. i used the tag with a href attribute but it opened for me a new tab, and i dont know how to get that the modal will open in the page, with like a href link that when the user click on that link (not a button. link) the modal will show.
thanks
If you want to show modal to user, set one state modal, something like this:
const [modalConf, setModalConf] = useState({show:false, mode:''})
and user click the link, you can change the state, like:
setModalConf({show:true, mode:'Terms'})
and finally, you render the modal component like this :
<Modal show={modalConf.show} mode={modalConf.mode} />
and your modal component will get mode component from props:
Modal component:
props.mode === 'Terms' && render Terms
props.mode === 'Privacy' && render Privacy
primereact dialog not triggering onHide fn from footer action for wrapper compoent
https://codesandbox.io/s/trusting-cdn-jkn5t?file=/src/demo/DialogDemo.js
isue: open console > open dialog > press no > console not print onhide (for esc and close btn working)
Method onHide is not triggered when clicking these buttons.
It is only triggered when closing dialog from icon.
I altered your code and used ref in order to achive this via props.onHide call.
Check my
codesandbox
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
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