I have a Modal component, which uses Bulma CSS' modal:
<script>
import { createEventDispatcher } from 'svelte';
export let active;
export let closeable = true;
const dispatch = createEventDispatcher();
const closeModal = () => {
active = false;
dispatch("closeModal");
};
const closeModalSoft = () => {
if (closeable) {
closeModal();
}
};
const closeModalKeyboard = (event) => {
if (event.key === "Escape" && closeable) {
closeModal();
}
};
</script>
<svelte:window on:keydown={closeModalKeyboard}/>
<div class="modal is-clipped" class:is-active={active}>
<div class="modal-background" on:click={closeModalSoft}/>
<div class="modal-content">
<div class="container">
<slot />
</div>
</div>
{#if closeable}
<button class="is-large modal-close" aria-label="close" on:click={closeModal}/>
{/if}
</div>
It should allow for arbitrary nesting, so you can for example have a modal over a modal over the rest of the website.
I would like to allow for modals be closed by pressing the close button, clicking outside of the modal or using the escape key. I would like this to operate like a stack: the topmost modal gets closed first. (Note: If a modal is not closeable as shown in my code, it just means that the modal can only be closed by manipulating active externally).
Currently, the close button and clicking outside the modal work with nested modals. However, escape will always close all modals, instead of just the topmost one. But, given the code, I think this is to be expected.
What would I need to change such that only the topmost (closeable=true) modal gets closed?
I have thought about the following approaches, but I feel like there must be better ways:
On escape, determine the element at the centre of the screen, and only if its ID is equal to some ID I will give each modal, close it.
On escape, query the DOM element and see if it has any children/siblings after itself that have both the modal and is-active classes. If so, ignore the keypress.
Perhaps use :focus or other modifiers on the topmost element and then a similar approach as the one above.
Adding the event on the window is the wrong approach which leads to this issue.
Modals should not allow focus to leave it, that being the case you should be able to handle the Escape press on the Modal itself. The easiest way to get the focus trap "for free" would be to use a native dialog element (though it getting support is still relatively recent).
A manual focus trap would have to steer focus on opening/closing and on any Tab press. There might be libraries that already implement this. Actually, I would not recommend implementing such generic components anyway and suggest the use of a component library instead. It is easy to get accessibility and things like keyboard interactions very wrong.
Guidelines for Modals: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
Related
I'm trying to build a funky use case:
I have a HeadlessUI dialog, inside this dialog, there is a HeadlessUI Menu component as a nested child, I want to trigger the menu via a keyboard shortcut
I have managed to trigger the dialog, via:
// I took the useWindowEvent from the headlessUI code
useWindowEvent("keydown", (event) => {
if (event.key === "p") {
event.preventDefault()
event.stopPropagation()
selectorRef.current?.click()
}
})
and on my Menu component:
// My react component forwardRefs to the trigger button
export const ProjectSelector = forwardRef(
... some other component code
<Menu.Button ref={ref} as="div">
... other code
This works fine to trigger the Menu, but the menu also has a search bar, so whenever I press the p key, the listener triggers again and programmatically closes the Menu
I have taken a look inside the headlessUI code trying to understand the focus trap code, but it's above my head, is there any way to detect if the parent Dialog has focus? that way I can just ignore the keypress if focus is on the menu :)
Workaround:
While writing the question I stumbled upon a workaround... it is not super pretty, so maybe someone can come up with a better solution:
// I'm pretty sure I'm doing everything wrong in here
// but I couldn't find another way to remotely trigger and keep focus on the menu component
useWindowEvent("keydown", (event) => {
if (
event.key === "p" &&
document.activeElement?.getAttribute("role") !== "menu" &&
document.activeElement?.tagName !== "INPUT"
) {
event.preventDefault()
event.stopPropagation()
selectorRef.current?.click()
}
})
I have the following problem, in my web site build with nextJS and ReactJS with typescript I have products that are loaded when a button is clicked, when I click the button the items appeared and the button is scrolled down, which is the asked behavior, but when I scroll to the bottom of the page and I try to click the button the scroll remains on the same position and the items are loaded but cannot be seen, my logic is to use onFocus on the current button and when I click it to change the scroll to him, that will solve the problem when the user has scrolled down to the bottom of the page, that way it will not remain on the bottom but rather it will automatically scroll up to the button and will see the new items loaded.
The problem is that the logic to load the products are in a different component in which I am reusing the current button and right prop I am sending function to the onClick on the button. My question is how can I use onFocus. Does it has to be in the child component inside the function or in the button component. I tried to make it work on the Button component, but it doesn't work. So I am stuck for the last 4 hours and I really need a push. I would be glad if you could shine some enlargement
Here I will enter the function in the parent component for the onClick prop :
const handleLoadMoreProducts = () => {
if (!isSearchPage) {
const mappedBreadcrumbs: string[] = categoryData.breadcrumbs.map(
(crumb: BreadCrumItem) => crumb.name
);
gtmBreadcrumbTrack(mappedBreadcrumbs);
}
<LoadMoreProducts handleLoadMoreProducts={handleLoadMoreProducts} />
And here is the component that uses the Button:
interface LoadMoreProductsProps {
handleLoadMoreProducts?: (MouseEvent: React.MouseEvent<HTMLButtonElement>) => void;
Focus?: (MouseEvent: React.MouseEvent<HTMLButtonElement>) => void;
}
const LoadMoreProducts: FC<LoadMoreProductsProps> = ({ handleLoadMoreProducts }) => (
<div className="LoadMoreProducts">
<Button type="button" importance="ghost" onClick={handleLoadMoreProducts}>
Load more products
</Button>
</div>
);
I think what you want to do is to forward the ref of the element you are trying to focus in the Button component using React.forwardRef and combine it with the useImperativeHandle hook in order to gain the ability to trigger the focus with the ref outside of the Button component.
You could create a ref for the element you are trying to focus and call the focus() function for the ref on click.
More information regarding forwarding refs and the useImperativeHandle hook.
I have a dropdown that is controlled via state.
Clicking on a button toggles it on. Clicking outside toggles it off.
The dropdown contains Links within my application, however, when the dropdown is being toggled off, route transition is prevented.
If autohide is disabled, routing works fine, however, it is desired to also hide the dropdown on route transition.
Please explain to me what is going on
Also please help me fix it
class App extends React.Component {
state = {
isNavShown: false
}
showNav = () => this.setState({isNavShown: true})
hideNav = event => {
// ... some more logic ...
// don't hide if autoHide is disabled
if (autoHide.checked === false) return
this.setState({isNavShown: false})
}
componentDidMount() {
document.addEventListener('mousedown', this.hideNav)
}
// ...
}
I have also tried wrapping the setState in setTimeout, but to no avail.
Here is the full jsfiddle https://jsfiddle.net/nimareq/1kh47uey/
So the issue is that your hideNav function is hiding the nav if the user clicks anywhere outside of show navigation button and the checkbox you built. However, if the user clicks on the nav itself it will be hidden before you have a chance to navigate the user.
Essentially, the browser will detect the click event listener you made on the document before it bubbles down to the anchor tag click. By the time it gets there the anchor tag is gone. (I hope that makes sense lol)
Anyways you can easily solve it by adding the following to your hideNav function:
if(nav.contains(event.target)) return;
Also don't forget to add the id="nav" on your navbar or whatever else you want to call it. This way the navbar won't disappear when u click on the navbar. It will still disappear if you click off the navbar.
I have a modal in React. When you click the background of the modal, the modal should close. The way I have it set up right now, if you click inside* the modal, it closes as well. Because the modal is inside the background>
handleClose(e) {
e.stopPropagation();
this.props.history.push('/business/dashboard')
}
render() {
return (
<Background onClick={e => this.handleClose(e)} name="BACKGROUND">
<Container onClick={console.log("IT CLICKED")} to={'/business/dashboard'} name="CONTAINER">
....
When I click on Container, the onClick event for Background gets called. I don't want this to happen. This is a form that users will be clicking on all the time. I need the modal to only close when you click outside the modal on Background.
I think it will work if you use stopPropagation on the Container click event instead of the Background. Just make sure that you use the onClick prop in your Container component.
class App extends React.Component {
handleClose = (e) => {
e.stopPropagation();
this.props.history.push("/business/dashboard");
};
render() {
return (
<Background onClick={this.handleClose} name="BACKGROUND">
<Container
onClick={e => e.stopPropagation()}
to={"/business/dashboard"}
name="CONTAINER"
/>
</Background>
);
}
}
EDIT: On rereading the question, the other answer is a simpler solution in this case.
The behavior you want to achieve is generally referred to as an "outside click" handler. There are a couple of decent libraries to handle this [0] and their source is pretty short and readable if you want to know how it works in detail. [1]
The general idea is to register a click event handler on the document in a HOC and check whether the event.target originates inside a React ref via Element.contains browser functionality. If is is, the handler will not be executed.
[0] https://github.com/tj/react-click-outside
[1] https://github.com/tj/react-click-outside/blob/master/index.js
I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?
This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog