diff --git a/common/changes/office-ui-fabric-react/checkForNoWrapFix_2019-06-21-05-14.json b/common/changes/office-ui-fabric-react/checkForNoWrapFix_2019-06-21-05-14.json new file mode 100644 index 0000000000000..a08f321949387 --- /dev/null +++ b/common/changes/office-ui-fabric-react/checkForNoWrapFix_2019-06-21-05-14.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "FocusZone: fixed keyboard navigation when checkForNoWrap prop enabled.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "vichaudh@microsoft.com" +} diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index 1990c8271ad43..48bf0cf47b333 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -224,7 +224,7 @@ export class FocusZone extends React.Component implements I // root props has been deprecated and should get removed. // it needs to be marked as "any" since root props expects a div element, but really Tag can // be any native element so typescript rightly flags this as a problem. - ...rootProps as any + ...(rootProps as any) } // Once the getClassName correctly memoizes inputs this should // be replaced so that className is passed to getRootClass and is included there so @@ -849,9 +849,9 @@ export class FocusZone extends React.Component implements I // Going left at a leftmost rectangle will go down a line instead of up a line like in LTR. // This is important, because we want to be comparing the top of the target rect // with the bottom of the active rect. - topBottomComparison = targetRect.top.toFixed(3) < activeRect.bottom.toFixed(3); + topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3)); } else { - topBottomComparison = targetRect.bottom.toFixed(3) > activeRect.top.toFixed(3); + topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3)); } if (topBottomComparison && targetRect.right <= activeRect.right && this.props.direction !== FocusZoneDirection.vertical) { @@ -889,9 +889,9 @@ export class FocusZone extends React.Component implements I // Going right at a rightmost rectangle will go up a line instead of down a line like in LTR. // This is important, because we want to be comparing the bottom of the target rect // with the top of the active rect. - topBottomComparison = targetRect.bottom.toFixed(3) > activeRect.top.toFixed(3); + topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3)); } else { - topBottomComparison = targetRect.top.toFixed(3) < activeRect.bottom.toFixed(3); + topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3)); } if (topBottomComparison && targetRect.left >= activeRect.left && this.props.direction !== FocusZoneDirection.vertical) {