I'm creating an library of components in Angular 8. Right now, I'm creating a modal component that display a window dialog. I want to block focus outside of modal to user only can focus buttons inside of modal with the Tab button. What is the best practice to do this?
The content of this control could be generic. I mean, the user can set a custom content. So one solution could be set tabindex = -1 to elements outside modal to block its focus.
I suggest to use angular material CDK for this. Specifically cdkFocusTrap which traps focus inside some element.
Example from the docs:
<div class="my-inner-dialog-content" cdkTrapFocus>
<!-- Tab and Shift + Tab will not leave this element. -->
</div>
Related
when I use a KendoReact DropDownList into a ReactBootstrap Modal the expanded list appears UNDER the modal so it can't be interacted with.
I read several issues that was pointing to a focus loss, which is not exactly my case, due to the fact that Kendo PopUp was append to body instead of the Modal itself, and the 'appendTo' prop seems to be a good solution for me but it exists only for the Kendo PopUp component, not for the Kendo DropDownList one (which uses PopUp underlying)...
I've made a repo illustrating this issue : https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal
And a LIVE demo for this repo (take some time to load):https://react-kendo-dropdown-into-boot.herokuapp.com/
Set bigger z-index for the animation container of the popup using CSS. And it will be on top of the modal to resolve it.
.k-animation-container{
z-index: 10000
}
Leave it to be rendered into the document. Since if you render it using appendTo to the Modal, the DropdDown will not be entirely visible when opened, or scrollbar will appear in your dialog. This is the purpose it is rendered into the document.
#Xizario's answer didn't work with V4.14.x
The solution that finally worked was to use ZIndexContext.Provider from '#progress/kendo-react-common':
<ZIndexContext.Provider value={10003}>
<DropDownList {...yourProps} />
</ZIndexContext.Provider
I have a Reactstrap Modal: Modal - Reactstrap
I would like to use this modal as a I would use a "normal" div in a page layout.
I.E. Show the modal inside the page with the same design, just without it popping in and out, and blurring the rest of the page.
Is this possible?
You will have to modify or override the CSS files of Reactstrap to achieve that. But it would not be a Modal any longer. It is better if you ask about what you want to achieve. You don't need to use modals to show a div with a toggle button.
I'm trying to use Popover component and have a case where I want to remove the click on document to close the popover. I want the user to click a close button within the content panel of my popover to close popover only.
I've tried using CLICK_TARGET_ONLY on interactionKind, but that doesn't allow me to use a close button in combination.
Do you know how I can achieve my desired behaviour?
Thanks!
This section may be useful: http://blueprintjs.com/docs/v1/#core/components/popover.opening---closing-popovers. Especially the part about .pt-popover-dismiss.
Is there any way to force JQuery to add an id to the default close "X" a-link widget (top right of the dialog window on the header bar) when you instantiate the dialog?
I know that you can give an ID to the OK/Cancel buttons when you define them in the options during dialog instantiation, although this is not an officially listed param. Was just wondering if there was a similar, unofficial param you could use for setting the id on the dialog close link?
This is required as currently, when using the Selenium FF plugin to record test scripts, it uses some ropey XPath to identify the close click, which is no good if your page structure has dynamically included/excluded elements.
You can search the button by its title
webDriver.findElement(By.xpath("//input[#title='close']"))
I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?