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
Related
Google recently announced a new way of user-signing-in here.
https://developers.google.com/identity/gsi/web?hl=en
With this tutorial, the button was created by adding HTML code or javascript.
which looks like,
But since the button is all created and rendered in a new Iframe, I can’t customize the button style as I want.
Is there any way to change the button style as it was offered before?
Previously, I used
window.gapi.load('auth2', () => {
const auth2 = window.gapi.auth2.init(options);
auth2.attachClickHandler(
idButtonRef.current,
{},
onSuccessCallback,
onFailCallback,
);
});
idButtonRef.current is the button and all I need was just attach the button and eventlistener as the above code shows. So I was able to create the button style as I want.
Is there a way to do this with a new way of google user signing?
It's my own (and not elegant) way to customize button. I make "right" Google button invisible and then add click handler to my custom button. We need to trigger click() on div with role=button attribute.
My example with plain JavaScript, but you should easily make something similar with React.js:
CSS:
.g_id_signin {
display: none;
}
HTML:
<div id="g_id_onload"
data-client_id="{{GOOGLE_CLIENT_ID}}"
data-login_uri="http://localhost:3000/google"
data-ux_mode="redirect">
</div>
<div class="g_id_signin"
data-type="icon"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<button id="custom-google-btn">Continue with Google</button>
JavaScript:
const googleBtn = document.getElementById('custom-google-btn');
googleBtn.addEventListener('click', () => {
document.querySelector('.g_id_signin div[role=button]').click();
});
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 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 have a header and I want to show an image on its right when the mouse is over the header.
I am maintaining a variable editMode in the state which is set to true/false
Then I am conditionally rendering the image using onMouseOver and onMouse events.
Now when I hover over the header, the edit mode is set to true and the image shows up and when I move the cursor out of the header, the editMode sets to false and the image disappears.
I am maintaining a variable editMode in the state which is set to true/false consditionally rendering the image using onMouseOver and onMouse:
Problem: When I hover over the edit icon, it starts flicker.
class TempComponent extends React.Component {
constructor() {
super()
this.editModeToggler = this.editModeToggler.bind(this)
this.state = {
editMode: false
}
}
editModeToggler() {
console.log('called')
this.setState({editMode: !this.state.editMode})
}
render() {
return(
<div>
<h3
onMouseOut={this.editModeToggler}
onMouseOver={this.editModeToggler}
>
Title
</h3>
{this.state.editMode?
<img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
:
null
}
</div>
)
}
}
You can find this code running over here: http://jsfiddle.net/Lu4w4v1c/2/
How do I stop this flickering. I have also tried using onMouseEnter and onMouseLeave as suggested here but it did not work. I dont know how but using these two events resulted in opposite of what I want. The first time the component loaded, everything was fine but as soon as I hover over the icon the whole dynamics changes. The icon shows up when the mouse is not over the header and it does not show up when the mouse is over the header. Please help
The code with onMouseEnter and onMouseLeave is over here: http://jsfiddle.net/Lu4w4v1c/3/
When you have the listener on h3, initially the image is not rendered so for the first time everything seems to be working fine, but once the image is rendered and you hover over the image it responds to the mouseout event of the heading and hides the image immediately which in turn triggers a mouseover on the h3 resulting in the flickering behaviour.
To solve your problem you can simply attach the listener on the container. Updated your fiddle http://jsfiddle.net/Lu4w4v1c/4/ with
<div onMouseOut={this.editModeToggler}
onMouseOver={this.editModeToggler}>
<h3>
Title
</h3>
{this.state.editMode?
<img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
:
null
}
</div>
If you have a container that is going to do onmouseover event that renders a div inside you should use onMouseLeave. The example fiddles has onmouseleave too.
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout
this shows the problem
I haven't managed to wrap my head around how to make use of existing modal libraries with React. For reference, I'm using the awesome remodal.
component.js.jsx
openNewModal: function () {
// The OpenModal component is wrapped around the modal's class which keeps it hidden until we show it here.
var modal = $(ReactDOM.findDOMNode(this.refs.modal)).remodal();
modal.open();
}
render: function () {
return(
<div onClick={this.openNewModal}>
<OpenModal ref="modal" />
</div>
);
}
modal.js.jsx
handleSubmit: function(e) {
e.preventDefault();
},
render: function () {
return(
<form onSubmit={this.handleSubmit}>
...
</form>
);
}
The modal opens up just fine. However, the binding on the onSubmit doesn't work. At first, I thought I'm doing something wrong. I added an onClick handler somewhere in the modal.js.jsx but still nothing would fire.
The interesting part is that, if I executed the binding immediately it worked, as in <form onSubmit={this.handleSubmit()}>. Which means that React fine up to the point that I actually open() the modal.
Is there a simple solution/example for modals and React?
The interesting part is that, if I executed the binding immediately it worked, as in . Which means that React fine up to the point that I actually open() the modal.
This happened because you explicitly added the click event once the modal actually placed in DOM. I think the solution could be in this way. Please add your modal mockup in the component.js.jsx like -
render: function () {
return(
<div onClick={this.openNewModal}>
<div class="remodal" data-remodal-id="modal">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Remodal</h1>
<p>
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
</p>
<br>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm" onSubmit={this.handleSubmit}>OK</button>
</div>
</div>
);
}
Then hide the modal mockup with CSS(if it is not hided bydefault by remodaljs). Then add your event(handleSubmit) to the ok button or to the form if modal is opened in form.
In openNewModal function instead of remodal the modal just open the modal.
Modal mockup is copied from remodal example. Do replace with your requirement.To be true i didn't have knowledge on remodal but i do faced the same problem while using the bootstrap modal.