{"action":"created","issue":{"url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5438","repository_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react","labels_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5438/labels{/name}","comments_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5438/comments","events_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5438/events","html_url":"https://github.com/OfficeDev/office-ui-fabric-react/issues/5438","id":337979842,"node_id":"MDU6SXNzdWUzMzc5Nzk4NDI=","number":5438,"title":"FocusZone: bidirectional not working correctly in RTL","user":{"login":"aishuiyer2001","id":6344772,"node_id":"MDQ6VXNlcjYzNDQ3NzI=","avatar_url":"https://avatars3.githubusercontent.com/u/6344772?v=4","gravatar_id":"","url":"https://api.github.com/users/aishuiyer2001","html_url":"https://github.com/aishuiyer2001","followers_url":"https://api.github.com/users/aishuiyer2001/followers","following_url":"https://api.github.com/users/aishuiyer2001/following{/other_user}","gists_url":"https://api.github.com/users/aishuiyer2001/gists{/gist_id}","starred_url":"https://api.github.com/users/aishuiyer2001/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aishuiyer2001/subscriptions","organizations_url":"https://api.github.com/users/aishuiyer2001/orgs","repos_url":"https://api.github.com/users/aishuiyer2001/repos","events_url":"https://api.github.com/users/aishuiyer2001/events{/privacy}","received_events_url":"https://api.github.com/users/aishuiyer2001/received_events","type":"User","site_admin":false},"labels":[{"id":746925636,"node_id":"MDU6TGFiZWw3NDY5MjU2MzY=","url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/labels/Area:%20Localization","name":"Area: Localization","color":"1d76db","default":false},{"id":822880010,"node_id":"MDU6TGFiZWw4MjI4ODAwMTA=","url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/labels/Component:%20FocusZone","name":"Component: FocusZone","color":"0e8a16","default":false},{"id":388450675,"node_id":"MDU6TGFiZWwzODg0NTA2NzU=","url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/labels/Type:%20Bug%20:bug:","name":"Type: Bug :bug:","color":"ee0701","default":false}],"state":"open","locked":false,"assignee":{"login":"natalieethell","id":14134000,"node_id":"MDQ6VXNlcjE0MTM0MDAw","avatar_url":"https://avatars0.githubusercontent.com/u/14134000?v=4","gravatar_id":"","url":"https://api.github.com/users/natalieethell","html_url":"https://github.com/natalieethell","followers_url":"https://api.github.com/users/natalieethell/followers","following_url":"https://api.github.com/users/natalieethell/following{/other_user}","gists_url":"https://api.github.com/users/natalieethell/gists{/gist_id}","starred_url":"https://api.github.com/users/natalieethell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/natalieethell/subscriptions","organizations_url":"https://api.github.com/users/natalieethell/orgs","repos_url":"https://api.github.com/users/natalieethell/repos","events_url":"https://api.github.com/users/natalieethell/events{/privacy}","received_events_url":"https://api.github.com/users/natalieethell/received_events","type":"User","site_admin":false},"assignees":[{"login":"natalieethell","id":14134000,"node_id":"MDQ6VXNlcjE0MTM0MDAw","avatar_url":"https://avatars0.githubusercontent.com/u/14134000?v=4","gravatar_id":"","url":"https://api.github.com/users/natalieethell","html_url":"https://github.com/natalieethell","followers_url":"https://api.github.com/users/natalieethell/followers","following_url":"https://api.github.com/users/natalieethell/following{/other_user}","gists_url":"https://api.github.com/users/natalieethell/gists{/gist_id}","starred_url":"https://api.github.com/users/natalieethell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/natalieethell/subscriptions","organizations_url":"https://api.github.com/users/natalieethell/orgs","repos_url":"https://api.github.com/users/natalieethell/repos","events_url":"https://api.github.com/users/natalieethell/events{/privacy}","received_events_url":"https://api.github.com/users/natalieethell/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-07-03T16:53:01Z","updated_at":"2018-08-31T18:50:43Z","closed_at":null,"author_association":"NONE","body":"### Bug Report \r\n \r\n- __Package version(s)__: office-ui-fabric-react 6.25.0\r\n- __Browser and OS versions__: Chrome 67.0.3396.99 (Official Build) (64-bit) and IE 11.2312.14393.0\r\n \r\n #### Requested priority: High\r\n \r\n #### Describe the issue:\r\n\r\nOn the 'FocusZone' component, setting the 'direction' attribute to 'FocusZoneDirection.bidirectional' does not work as expected for RTL languages (dir=\"RTL\" has been set on the parent 'Fabric' component).\r\n\r\nWe have a grid of tiles very similar to the grids under 'Variants' here - https://developer.microsoft.com/en-us/fabric#/components/focuszone\r\n\r\nSet focus on the first tile by clicking on it (first tile = first row, 'last' col - since this is RTL).\r\nHit right arrow - Nothing happens (expected since there is nothing on the right)\r\nHit left arrow - Focus shifts to tile below, rather than the tile on the left (<= BUG).\r\n\r\nOn the other hand, when you click on some tile in the middle (any tile with tiles on the left and right), then hitting the left arrow key takes you left, and right arrow key takes you right. (works as expected)\r\n \r\n#### Expected behavior:\r\n \r\nSetting focus on the first tile (first tile = first row, 'last' col - since this is RTL) and then\r\nhitting 'left' arrow key - should shift focus to the left tile (and not to the tile below)\r\n\r\nJust as a side note and if it helps at all - Changing the 'direction' to 'FocusZoneDirection.horizontal' fixes this (left arrow key) issue and displays the expected behavior for left and right arrow keys (but this option does not support vertical navigation - which is expected). \r\n\r\nBut our use case requires both horizontal and vertical navigation to work and hence the bug report on 'FocusZoneDirection.bidirectional'.\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/comments/417758175","html_url":"https://github.com/OfficeDev/office-ui-fabric-react/issues/5438#issuecomment-417758175","issue_url":"https://api.github.com/repos/OfficeDev/office-ui-fabric-react/issues/5438","id":417758175,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNzc1ODE3NQ==","user":{"login":"natalieethell","id":14134000,"node_id":"MDQ6VXNlcjE0MTM0MDAw","avatar_url":"https://avatars0.githubusercontent.com/u/14134000?v=4","gravatar_id":"","url":"https://api.github.com/users/natalieethell","html_url":"https://github.com/natalieethell","followers_url":"https://api.github.com/users/natalieethell/followers","following_url":"https://api.github.com/users/natalieethell/following{/other_user}","gists_url":"https://api.github.com/users/natalieethell/gists{/gist_id}","starred_url":"https://api.github.com/users/natalieethell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/natalieethell/subscriptions","organizations_url":"https://api.github.com/users/natalieethell/orgs","repos_url":"https://api.github.com/users/natalieethell/repos","events_url":"https://api.github.com/users/natalieethell/events{/privacy}","received_events_url":"https://api.github.com/users/natalieethell/received_events","type":"User","site_admin":false},"created_at":"2018-08-31T18:50:43Z","updated_at":"2018-08-31T18:50:43Z","author_association":"COLLABORATOR","body":"Thanks for submitting this issue @aishuiyer2001! Looking into this. Here's a CodePen repro for reference: https://codepen.io/naethell/pen/wEgawK."}}
{"actor":{"display_login":"natalieethell"}}