superdesk-ui-framework 3.0.35 → 3.0.36

package/app-typescript/components/TreeSelect.tsx

@@ -109,6 +109,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.branchButton = this.branchButton.bind(this);
         this.handleDebounce = this.handleDebounce.bind(this);
         this.toggleMenu = this.toggleMenu.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.inputRef = React.createRef();
@@ -129,38 +131,47 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.categoryButtonRef.current?.focus();
     }
 
-    componentDidMount = () => {
-        this.recursion(this.state.options);
-        document.addEventListener("mousedown", (event) => {
-            if (
-                (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
-                && (this.openDropdownRef.current?.contains(event.target as HTMLElement) !== true)
-            ) {
-                this.setState({openDropdown: false});
+    onMouseDown = (event: MouseEvent) => {
+        if (
+            (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
+            && (this.openDropdownRef.current?.contains(event.target as HTMLElement) !== true)
+        ) {
+            this.setState({openDropdown: false});
+        }
+    }
+
+    onKeyDown = (e: KeyboardEvent) => {
+        if (this.state.openDropdown && this.ref.current) {
+            keyboardNavigation(
+                e,
+                this.ref.current,
+                this.categoryButtonRef.current ? this.buttonFocus : this.inputFocus,
+            );
+            if (e.key === 'Backspace') {
+                this.backButton();
+                this.backButtonValue();
+
+                const {buttonTarget} = this.state;
+                const className = buttonTarget.pop();
+
+                if (className != null) {
+                    const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
+                    element.focus();
+                }
             }
-        });
+        }
+    }
 
-        document.addEventListener("keydown", (e: KeyboardEvent) => {
-            if (this.state.openDropdown && this.ref.current) {
-                keyboardNavigation(
-                    e,
-                    this.ref.current,
-                    this.categoryButtonRef.current ? this.buttonFocus : this.inputFocus,
-                );
-                if (e.key === 'Backspace') {
-                    this.backButton();
-                    this.backButtonValue();
+    componentDidMount = () => {
+        this.recursion(this.state.options);
 
-                    const {buttonTarget} = this.state;
-                    const className = buttonTarget.pop();
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
 
-                    if (className != null) {
-                        const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
-                        element.focus();
-                    }
-                }
-            }
-        });
+    componentWillUnmount(): void {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
     }
 
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
@@ -793,7 +804,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                                         }}
                                                     >
                                                         <button
-                                                            className={`suggestion-item--btn ${this.props.getId(option.value)}`}
+                                                            className={`suggestion-item--btn z${this.props.getId(option.value)}z`}
                                                             onKeyDown={(event) => {
                                                                 if (event.key === 'Enter' && option.children) {
                                                                     this.setState({

package/dist/examples.bundle.js

@@ -64238,30 +64238,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = buttonTarget.pop();
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -64296,6 +64298,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -64304,6 +64308,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -64774,7 +64782,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
@@ -142949,7 +142957,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 681 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.35","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.36","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 682 */

package/dist/superdesk-ui.bundle.js

@@ -63855,30 +63855,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = buttonTarget.pop();
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -63913,6 +63915,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -63921,6 +63925,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -64391,7 +64399,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.35",
+  "version": "3.0.36",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/TreeSelect.d.ts

@@ -69,7 +69,10 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     inputFocus: () => void;
     listNavigation: () => void;
     buttonFocus: () => void;
+    onMouseDown: (event: MouseEvent) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
     componentDidMount: () => void;
+    componentWillUnmount(): void;
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
     toggleMenu(): void;
     removeClick(i: number): void;

package/react/components/TreeSelect.js

@@ -77,30 +77,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = buttonTarget.pop();
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -135,6 +137,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -143,6 +147,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -613,7 +621,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [