So I have a Bootstrap ( not react-bootstrap, just plain bootstrap) panel group in my React app, each panel opens up on clicking the panel heading. I also have a small span component inside the panel-heading, with an onClick handler attached to it.
My problem is, whenever I click on the span, the panel heading click is also triggered and the panel is closed/opened.
I tried the following things inside my onClick handler, but none of them prevented the event from bubbling up to the panel heading:
ev.stopPropagation()
ev.preventDefault()
ev.nativeEvent.stopPropagation()
ev.nativeEvent.stopImmediatePropagation()
The bootstrap clicks work based on data-toggle attributes.
UPDATE Code snippet reproducing the issue: https://codepen.io/danegit/pen/YOjdeN
Related
So I took the example react-mui has in the docs about having the autocomplete inside a custom popover demo here, but I replaced the popover with the Menu component because the popover gets cropped inside modals.
So the minimal code is something like this
The problem I'm experiencing is that if you write something inside the input box, then use the arrow keys for selecting an item, the input box gets blurred and so the autocomplete resets it. this behavior doesn't happen when using a popover.
Any suggestion on how to keep the input focused even when selecting an item using the keyboard arrow keys?
As it stated in AngularJs Material 1.x official docs md-no-select-click
When enabled, click events will not be fired when selecting tabs
What is the real use case of this feature?
Answered by Angular Lead Maintainer here https://github.com/angular/material/issues/10947#issuecomment-390435270
When true, click events will not be fired when the value of md-active on an md-tab changes. This is useful when using tabs with UI-Router's child states, as triggering a click event in that case can cause an extra tab change to occur.
And more explanation here https://github.com/angular/material/issues/10947#issuecomment-390433726
The original idea was that ui-router's directive listened for a click event and this would prevent the initial selection from passing a click event. So if you had a set of tabs which were used for navigation and each tab tied to a route, you could add this attribute to fix loading a route besides the first tab sending you back to the first tab because of the initial selection firing the click event and triggering a navigation.
Any idea how to create a dropdown menu that is a modal dialog? that is it's triggered by selecting a menubar the modal item is the dropdown that contains the options to select and it as an apply or close in it such that no other clicks outside of the dropdown are effective until your click on apply or close.
I'm using react-boostrap but the Modal component is not what I can use since it takes over the whole screen and renders the dialog box on top, is there a way to make the contents of a Modal relative to the menu?
I've got a page which displays modal box from UI Bootstrap. My protractor test then clicks a button in the modal which closes it, the test then clicks another button on the page.
The problem is that there is nothing waiting until the modal actually disappears so quite often is tries to click the button on the page but fails because the modal backdrop is still covering the page.
Currently my code to close the modal looks like this:
#When /^I click button in modal with class "([^"]*)"$/, (className, callback) ->
element(By.css '.modal-dialog').
element(By.css 'button.' + className).
click().
then(callback)
Any idea how to wait until the modal disappears before triggering the callback?
A dirty trick, but it works for me : do an explicit call to waitForAngular() and remove fade class on Bootstrap modal. This will wait for your Protractor instructions (example : a click on a button to display the modal) and remove undesirable fade effect.
browser.waitForAngular();
browser.executeScript("$('.modal').removeClass('fade');");
I am using twitter boostrap to implement tooltip for my web app (twipsy)
My implementation is as follows:
%li.friend
%a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"click to see xxxx's muse"}
%img{src: "<%= avatar_url %>"}
The sequence of steps is as follows:
1) Hover on the avatar I want to click => tooltip appears above avatar (no issue)
2) Click on avatar to load a new page
3) New page is loaded but the tooltip shown in 1) did not disappear and just remain displayed on the newly loaded page.
Is there any additional parameters I need to set to ensure that the tooltip disappears in step 3)?
As tooltip toggles on mouseenter and leave when you click the element and DOM structure is replaced with new page the mouseleave on the avatar is never triggered as the element was removed programmatically while mouse was hovering over it.
To fix that you need to call the .tooltip('hide') method when you click the avatar.