vigetlabs / react-focus-trap Goto Github PK

For preventing underlay scrolling on iOS and other behavior, it would be great if react-focus-trap exposed a hook for when a focus-trap was visible on the screen

It's a good rule of thumb to forward all unrecognized properties that were passed down.

I'm working on a typescript react project where I've installed react-focus-trap via yarn yarn add react-focus-trap and I can see into the package.json "react-focus-trap": "^2.7.1",.

In my code I'm using it:

// ...
import FocusTrap from 'react-focus-trap';
// ...

class Modal extends React.Component<ModalProps, any> {
	// ...

	render() {
		return <FocusTrap className='modal'><div /></FocusTrap>
	}
}

Debugging it, I can see that FocusTrap is undefined and react is generating this error:

warning.js?85a7:33 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Modal`.

Any idea on this error?

Focus trap focuses the focus-trap div after I press tab on the last element. I do not need that focus, I want it to jump from the last to the first item.

Let's fix it!

https://github.com/ten1seven/what-input

Otherwise, screen readers will read this as "Navigation. One item", since there's only one immediate readable child.

We should really be smoke signal testing focus management, I'd like to use something like Nightmare:

http://nightmarejs.org

If you open a popup inside of other markup, the event should not bubble up.

We loosely have one in the example, but it would be nice to include one in the build

Found an issue where one trap is incorrectly forced to unpause when another trap is disabled/destroyed.

Here is simple example:

• Preview https://wkj3kk5307.codesandbox.io/
• Code https://codesandbox.io/s/wkj3kk5307

Steps to reproduce:

1. Click on 'btn 2' to remove second trap.

Result:
Trap 1 (with child 'btn 1') becomes active preventing 'btn 3' from being focused or clicked.

Expectation:

• Trap 1 (with child 'btn 1') should remain paused due <FocusTrap paused={true}>.
• 'btn 3' should be focusable and clickable.

When dynamically rendering a component coning a FocusTrap-component this warning gets logged to the console:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: FocalPoint

Does it work? Could we be better?

Or maybe it could specify if it should remain open and not allow others to open

Not sure if I'm just doing something really wrong here but this is my code:

return <FocusTrap active={this.props.menuVisible} onExit={this.escape}> 
...

Which fires a React error:
Warning: Unknown prop onExit on

React 16 is going to deprecate it.

This project can also be used for dropdowns. It would be great to have an example of this.

I've just spent a while hunting down a little memory leak that we traced to this library. The event handlers on inputs that are left focussed when we unmounted a route in our app were being held and causing a leak. Have you come across this before? Is there anyway to ensure these are released from within focus-trap-react?