{"action":"closed","issue":{"url":"https://api.github.com/repos/mlaursen/react-md/issues/749","repository_url":"https://api.github.com/repos/mlaursen/react-md","labels_url":"https://api.github.com/repos/mlaursen/react-md/issues/749/labels{/name}","comments_url":"https://api.github.com/repos/mlaursen/react-md/issues/749/comments","events_url":"https://api.github.com/repos/mlaursen/react-md/issues/749/events","html_url":"https://github.com/mlaursen/react-md/issues/749","id":327495471,"node_id":"MDU6SXNzdWUzMjc0OTU0NzE=","number":749,"title":"[FocusContainer] - Hidden input at the end breaks focus trap","user":{"login":"garrettn","id":5113153,"node_id":"MDQ6VXNlcjUxMTMxNTM=","avatar_url":"https://avatars0.githubusercontent.com/u/5113153?v=4","gravatar_id":"","url":"https://api.github.com/users/garrettn","html_url":"https://github.com/garrettn","followers_url":"https://api.github.com/users/garrettn/followers","following_url":"https://api.github.com/users/garrettn/following{/other_user}","gists_url":"https://api.github.com/users/garrettn/gists{/gist_id}","starred_url":"https://api.github.com/users/garrettn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/garrettn/subscriptions","organizations_url":"https://api.github.com/users/garrettn/orgs","repos_url":"https://api.github.com/users/garrettn/repos","events_url":"https://api.github.com/users/garrettn/events{/privacy}","received_events_url":"https://api.github.com/users/garrettn/received_events","type":"User","site_admin":false},"labels":[{"id":290685516,"node_id":"MDU6TGFiZWwyOTA2ODU1MTY=","url":"https://api.github.com/repos/mlaursen/react-md/labels/bug","name":"bug","color":"fc2929","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/mlaursen/react-md/milestones/46","html_url":"https://github.com/mlaursen/react-md/milestone/46","labels_url":"https://api.github.com/repos/mlaursen/react-md/milestones/46/labels","id":3391479,"node_id":"MDk6TWlsZXN0b25lMzM5MTQ3OQ==","number":46,"title":"v1.3.4","description":"","creator":{"login":"mlaursen","id":3920850,"node_id":"MDQ6VXNlcjM5MjA4NTA=","avatar_url":"https://avatars2.githubusercontent.com/u/3920850?v=4","gravatar_id":"","url":"https://api.github.com/users/mlaursen","html_url":"https://github.com/mlaursen","followers_url":"https://api.github.com/users/mlaursen/followers","following_url":"https://api.github.com/users/mlaursen/following{/other_user}","gists_url":"https://api.github.com/users/mlaursen/gists{/gist_id}","starred_url":"https://api.github.com/users/mlaursen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mlaursen/subscriptions","organizations_url":"https://api.github.com/users/mlaursen/orgs","repos_url":"https://api.github.com/users/mlaursen/repos","events_url":"https://api.github.com/users/mlaursen/events{/privacy}","received_events_url":"https://api.github.com/users/mlaursen/received_events","type":"User","site_admin":false},"open_issues":1,"closed_issues":1,"state":"open","created_at":"2018-05-31T20:05:40Z","updated_at":"2018-05-31T20:12:08Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2018-05-29T21:33:04Z","updated_at":"2018-05-31T20:12:08Z","closed_at":"2018-05-31T20:12:08Z","author_association":"NONE","body":"### Description\r\n\r\nIf you have a dialog with inputs inside it, and the last input is `type=\"hidden\"`, then the focus trapping no longer works. If you tab forward, it breaks outside of the dialog. If you tab backward, it gets stuck at the beginning.\r\n\r\nAfter some digging I discovered that the [`_focusables` array that FocusContainer creates](https://github.com/mlaursen/react-md/blob/master/src/js/Helpers/FocusContainer.js#L97) includes every input, including hidden ones. But hidden inputs can't receive focus. So as you're tabbing forward and [FocusContainer is checking if you're on the last element in `_focusables`](https://github.com/mlaursen/react-md/blob/master/src/js/Helpers/FocusContainer.js#L190), it will never match, so the event is not prevented and focus breaks out of the container. If you're going backwards, it tries to focus the last element, but it can't, so it gets stuck there while it keeps trying.\r\n\r\nNormally we could get around this by _not_ having a hidden input at the end, but as luck would have it, we're using a DataTable in the dialog, which has one built in, so it's a bit more complicated :smile:.\r\n\r\nI think the fix would be to filter out hidden inputs when creating the `_focusables` array.  It would also have to filter inputs hidden with CSS using `display: none` or `visibility: hidden`, if I understand correctly.\r\n\r\nI'd be happy to make a PR if you think this is on the right track.\r\n\r\nThanks!\r\n\r\n### Link to a gist or code sample where the issue can be reproduced\r\n\r\nhttps://stackblitz.com/edit/react-k4bekc?file=Demo.js\r\n\r\n### Version\r\n- React:  16.1.1 (on Stackblitz, but also seen on 15.6.2 locally)\r\n- React-MD: 1.3.2\r\n- Browser: Firefox/Chromium\r\n"}}
{"actor":{"display_login":"mlaursen"}}