Comments (21)
Let's say you are a screen reader user, when the modal opens, and you folks go and focus the primary button, how does the user know what the content of the modal says? They don't. They also don't know if they should move the virtual cursor up or down to find out.
I can't remember why it's in a setTimeout, but I guess it's nice that it keeps you from confusing blind folks :P
If there's a good accessibility argument here, I'll reopen, but as far as I can tell we are doing the most accessible thing, which is the primary goal of this component.
from react-modal.
This appears to be fixed in #222
from react-modal.
i think you just put <input autoFocus />
. source
from react-modal.
@ryanflorence can you please point to a guide that says this?
This article contradicts what you said: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role#Focus_management
from react-modal.
@ryanflorence It seems to me that @vvlevykin has a compelling a11y argument for at least allowing this behavior to be conditionally controlled. For use cases where we do need to have this behavior, i.e. a properly labeled and annotated form, we have to either have a focus+blur+focus cycle that causes validation issues under redux-forms, or we have to play the game of using setTimeout to avoid a race condition with this code and hoping that it works in all situations.
from react-modal.
In case anyone else comes across this, as of v0.13
, getDOMNode()
is deprecated. The above example would be changed to this:
componentDidMount: function() {
setTimeout(function() {
React.findDOMNode(this.refs[MY_REF]).focus();
}.bind(this), 0);
},
from react-modal.
autoFocus
doesn't work because it focuses the input when the modal is mounted.
We need to focus the input every time the modal opens instead:
componentDidUpdate: function(prevProps, prevState) {
if (prevState.yourVar !== this.state.yourVar && this.state.yourVar === true) {
setTimeout(function() {
React.findDOMNode(this.refs.yourInput).focus();
}.bind(this), 0);
}
}
yourVar
is the variable you give to the modal as isOpen
.
This works perfectly fine for me.
from react-modal.
componentDidMount
/componentDidUpdate
weren't working for me, but then I used the onAfterOpen
prop as described in this PR's code (using the ref callback rather than the deprecated string notation they used), and I was able to focus on a text input.
from react-modal.
I'm having a similar problem with not being able to .focus something inside componentDidMount. I'm using refs.
var VIEWER_REF = 'VIEWER';
var PhotoViewer = React.createClass({
componentDidMount: function() {
this.refs[VIEWER_REF].getDOMNode().focus();
},
render: function() {
return (
<div tabIndex="0" ref={VIEWER_REF}>
{contents}
</div>
);
},
});
I've verified that this.refs[VIEWER_REF].getDOMNode().focus() is defined and being called. It worked before I put my PhotoViewer inside react-modal.
from react-modal.
if you want to focus on an input
, you should just be able to put autoFocus
on it, unless you need more control over it
from react-modal.
from react-modal.
Also worth noting that document.activeElement (currently focused element) after my PhotoViewer opens is the ReactModal__Content element, so it seems like it's stealing focus from me. Why does the modal need focus?
from react-modal.
Can we get a prop (default true) so that we can disable this functionality? I don't see why the Modal needs focus. I'm happy to manually pipe through ESC to changing isOpen to false.
from react-modal.
Also sorry for the quadruple post, but a temporary workaround is the following:
componentDidMount: function() {
setTimeout(function() {
this.refs[MY_REF].getDOMNode().focus();
}.bind(this), 0);
},
from react-modal.
i have the same problem http://prntscr.com/8f6cve
from react-modal.
I'm also having the issue where the react-modal becomes the active element upon opening and I need a way to prevent this from happening. Using doesn't work correctly. What happens is, the focus is set on the input initially, but then set on the modal within <100 ms after mounting.
from react-modal.
@SebT Thanks. Do you know why setTimeout
is needed? if i log in a ref callback i see that componentDidUpdate
is called before the ref callback... is that how it is suppose to work?
from react-modal.
Thanks @SebT for the hack around the setTimeout!
@ryanflorence can you explain why forcing the content to be focused is preferred over allowing autoFocus to work on inputs?
from react-modal.
This bites me heavily on iOS/Safari. The Safari developers decided to be smarter than everyone, and decided that you can't focus() an input anytime else than when consuming a click event. This means that the setTimeout() hack won't work there. :(
from react-modal.
@ryanflorence Would you consider reopening this bug because of what I wrote above?
from react-modal.
@ryanflorence Ping. This is still a problem, and I still haven't found a compelling solution (other than not using react-modal in the first place).
from react-modal.
Related Issues (20)
- Replace focus trap with `inert` HOT 1
- Focus on the input element is lost when trying to scroll modal content by dragging scrollbar
- Focus trap incorrectly finds tabbable elements HOT 11
- Modal doesn't close on the first click on the overlay after click on elements containing event.stopPropagation() inside modal HOT 11
- Add support for React & Node 18 (as easy as adding startTransition() on each setState) HOT 18
- When I try to apply css variables from css modules in React, nothing is passed HOT 9
- Npm start related issue
- Why convert position property to inset? HOT 2
- Analysis: 90% of dependency updates in this repository can be merged.
- Should use event.key not event.code
- How can i make the modal overlay non blocking? HOT 2
- Resize error when moving tab around HOT 2
- Display blurry when elements with position attributes and have scrollbars. HOT 3
- Close the modal window on the first click when using stopPropagation() HOT 3
- Moving to a "modern" build system (hardcore level) HOT 6
- Refactor react-modal to use TypeScript HOT 1
- Replace Karma (now deprecated) with a new test runner HOT 6
- Runtime error when tabbing elements where shadowDom is a document fragment rather than an element
- Consider dropping support for React versions <= v16 HOT 3
- Avoid Scroll position being kept HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-modal.