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?
Related
I have a search box with an autocomplete wrapped around it using antd components and when the input is populated and you click the search button, the dropdown still shows. It doesnt hide itself. Here is the link to the codesandbox. These are the steps to reproduce:
Type in any text in the input.
click outside of the area on the black page to unfocus it
Click the search button
The dropdown shouldnt show again.
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?
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
I am using React Modal Plugin to display the modals. I am trying to achieve to below scenario.
On button click a modal will open, inside the modal, i have another button, on click of this button, need to open another modal. but the first opened modal, should stay in the back. I didn't see any documentation regarding this.
That is already supported. Just nest the modal components. That is, inside the rendered content of the first modal, render another modal component. When you click the opening element of the second modal, it will appear in front of the first, while the first stays open in the background.
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');");