@atlaskit/select 15.7.2 → 15.7.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 15.7.3
+
+### Patch Changes
+
+- [`5e578b89178`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5e578b89178) - Fixed an issue in PopupSelect that caused the page to scroll to the top.
+
 ## 15.7.2
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -132,6 +132,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: _components.defaultComponents,
       mergedPopperProps: defaultPopperProps
@@ -188,6 +189,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         onChange(value, actionMeta);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFirstPopperUpdate", function () {
+      // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
+      // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
+      // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
+      _this.setState({
+        focusLockEnabled: true
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
 
@@ -245,6 +254,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         isOpen: false
       });
 
+      _this.setState({
+        focusLockEnabled: false
+      });
+
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -328,6 +341,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           target = _this$props4.target,
           props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
       var _this$state = _this.state,
+          focusLockEnabled = _this$state.focusLockEnabled,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,
           mergedPopperProps = _this$state.mergedPopperProps;
@@ -344,7 +358,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, mergedPopperProps, function (_ref2) {
+      var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
+        onFirstUpdate: function onFirstUpdate(state) {
+          var _mergedPopperProps$on;
+
+          _this.handleFirstPopperUpdate();
+
+          (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
+        }
+      }), function (_ref2) {
         var placement = _ref2.placement,
             ref = _ref2.ref,
             style = _ref2.style;
@@ -357,6 +379,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+          disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/_react.default.createElement(_reactSelect.default, (0, _extends2.default)({
           backspaceRemovesValue: false,

package/dist/cjs/Select.js

@@ -14,7 +14,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.2";
+var packageVersion = "15.7.3";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.2",
+	"version": "15.7.3",
 	"sideEffects": false
 }

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -71,6 +71,7 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
 
     _defineProperty(this, "state", {
+      focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
@@ -135,6 +136,15 @@ export default class PopupSelect extends PureComponent {
       }
     });
 
+    _defineProperty(this, "handleFirstPopperUpdate", () => {
+      // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
+      // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
+      // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
+      this.setState({
+        focusLockEnabled: true
+      });
+    });
+
     _defineProperty(this, "open", options => {
       const {
         onOpen
@@ -194,6 +204,9 @@ export default class PopupSelect extends PureComponent {
       this.setState({
         isOpen: false
       });
+      this.setState({
+        focusLockEnabled: false
+      });
 
       if (this.targetRef != null) {
         this.targetRef.focus();
@@ -286,6 +299,7 @@ export default class PopupSelect extends PureComponent {
         ...props
       } = this.props;
       const {
+        focusLockEnabled,
         isOpen,
         mergedComponents,
         mergedPopperProps
@@ -300,7 +314,14 @@ export default class PopupSelect extends PureComponent {
         return null;
       }
 
-      const popper = /*#__PURE__*/React.createElement(Popper, mergedPopperProps, ({
+      const popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
+        onFirstUpdate: state => {
+          var _mergedPopperProps$on;
+
+          this.handleFirstPopperUpdate();
+          (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
+        }
+      }), ({
         placement,
         ref,
         style
@@ -314,6 +335,7 @@ export default class PopupSelect extends PureComponent {
           maxWidth: maxMenuWidth,
           id: this.popperWrapperId
         }, /*#__PURE__*/React.createElement(FocusLock, {
+          disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: false,

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "15.7.2";
+const packageVersion = "15.7.3";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.2",
+	"version": "15.7.3",
 	"sideEffects": false
 }

package/dist/esm/PopupSelect/PopupSelect.js

@@ -106,6 +106,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
 
     _defineProperty(_assertThisInitialized(_this), "state", {
+      focusLockEnabled: false,
       isOpen: (_this$defaultOpenStat = _this.defaultOpenState) !== null && _this$defaultOpenStat !== void 0 ? _this$defaultOpenStat : false,
       mergedComponents: defaultComponents,
       mergedPopperProps: defaultPopperProps
@@ -167,6 +168,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleFirstPopperUpdate", function () {
+      // When the popup opens it's focused into. Since the popup is inside a portal, it's position is
+      // initially set to 0,0 - this causes the window scroll position to jump to the top. To prevent
+      // this we defer enabling the focus-lock until after Popper has positioned the popup the first time.
+      _this.setState({
+        focusLockEnabled: true
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
 
@@ -225,6 +235,10 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         isOpen: false
       });
 
+      _this.setState({
+        focusLockEnabled: false
+      });
+
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
@@ -316,6 +330,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           props = _objectWithoutProperties(_this$props4, _excluded);
 
       var _this$state = _this.state,
+          focusLockEnabled = _this$state.focusLockEnabled,
           isOpen = _this$state.isOpen,
           mergedComponents = _this$state.mergedComponents,
           mergedPopperProps = _this$state.mergedPopperProps;
@@ -332,7 +347,15 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var popper = /*#__PURE__*/React.createElement(Popper, mergedPopperProps, function (_ref2) {
+      var popper = /*#__PURE__*/React.createElement(Popper, _extends({}, mergedPopperProps, {
+        onFirstUpdate: function onFirstUpdate(state) {
+          var _mergedPopperProps$on;
+
+          _this.handleFirstPopperUpdate();
+
+          (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
+        }
+      }), function (_ref2) {
         var placement = _ref2.placement,
             ref = _ref2.ref,
             style = _ref2.style;
@@ -345,6 +368,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           maxWidth: maxMenuWidth,
           id: _this.popperWrapperId
         }, /*#__PURE__*/React.createElement(FocusLock, {
+          disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/React.createElement(Select, _extends({
           backspaceRemovesValue: false,

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "15.7.2";
+var packageVersion = "15.7.3";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "15.7.2",
+	"version": "15.7.3",
 	"sideEffects": false
 }

package/dist/types/PopupSelect/PopupSelect.d.ts

@@ -70,6 +70,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     isInvalid?: boolean;
 }
 interface State<Modifiers = string> {
+    focusLockEnabled: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -84,6 +85,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;
     state: {
+        focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
@@ -112,6 +114,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+    handleFirstPopperUpdate: () => void;
     /**
      * Opens the popup
      *

package/dist/types-ts4.0/PopupSelect/PopupSelect.d.ts

@@ -70,6 +70,7 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
     isInvalid?: boolean;
 }
 interface State<Modifiers = string> {
+    focusLockEnabled: boolean;
     isOpen: boolean;
     mergedComponents: Object;
     mergedPopperProps: PopperPropsNoChildren<defaultModifiers | Modifiers>;
@@ -84,6 +85,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     isOpenControlled: boolean;
     defaultOpenState: boolean | undefined;
     state: {
+        focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
@@ -112,6 +114,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
     handleKeyDown: (event: KeyboardEvent) => void;
     handleClick: ({ target }: MouseEvent) => void;
     handleSelectChange: (value: ValueType<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+    handleFirstPopperUpdate: () => void;
     /**
      * Opens the popup
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "15.7.2",
+  "version": "15.7.3",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"