Feature: Render popup at window level

CHANGELOG.md

@@ -7,10 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED] - YYYY-MM-DD
 
+### Changed
+
+- [#181](https://github.com/equinor/webviz-core-components/pull/181) - `SmartNodeSelector` suggestions window is now attached at top level of DOM tree. This improves usability when used in a scroll area.
+
 ### Fixed
 
 - [#177](https://github.com/equinor/webviz-core-components/pull/177) - Bug fix: Menu missing if using non-existent icon.
 
+### Added
+- [#174](https://github.com/equinor/webviz-core-components/pull/174) - Implemented `initiallyCollapsed` setting for menu.
+
 ## [0.5.2] - 2021-10-08
 
 ### Changed
@@ -29,7 +36,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - [#154](https://github.com/equinor/webviz-core-components/pull/154) - Implemented new menu component.
-- [#174](https://github.com/equinor/webviz-core-components/pull/174) - Implemented `initiallyCollapsed` setting for menu.
 
 ## [0.5.1] - 2021-07-12
 
@@ -50,9 +56,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - [#134](https://github.com/equinor/webviz-core-components/pull/134) - When prereleases are done in GitHub, they will now be published to `npm` using the `next` tag. E.g. `npm install @webviz/core-components` will install the latest official release, while `npm install @webviz/core-components@next` will install the
-    latest prerelease.
+  latest prerelease.
 - [#125](https://github.com/equinor/webviz-core-components/pull/125) - Moved `React` code and `Node.js` configuration into `./react/` directory.
-    Adjusted `package.json`, `.gitignore`, `.vscode/launch.js` and GitHub workflow file accordingly.
+  Adjusted `package.json`, `.gitignore`, `.vscode/launch.js` and GitHub workflow file accordingly.
 - [#125](https://github.com/equinor/webviz-core-components/pull/125) - Tightened `tsconfig` options in order to have a more strict code validation.
 - [#125](https://github.com/equinor/webviz-core-components/pull/125) - Synchronized ECMA Script version in `tsconfig` and `eslint`.
 - [#125](https://github.com/equinor/webviz-core-components/pull/125) - Added automatic removal of unused autogenerated files (`.Rbuildignore`).
@@ -73,7 +79,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - [#136](https://github.com/equinor/webviz-core-components/pull/136) - Several bug fixes in `SmartNodeSelector` (exception on entering invalid node name when no metadata given, exception on using several wildcards,
-    new tag when pressing enter with single node selection and invalid data, node selected several times when its name is partly contained in other nodes, exception on holding backspace pressed).
+  new tag when pressing enter with single node selection and invalid data, node selected several times when its name is partly contained in other nodes, exception on holding backspace pressed).
 - [#125](https://github.com/equinor/webviz-core-components/pull/125) - Removed `selectedNodes` attribute from `SmartNodeSelector` arguments in `usage.py`.
 - [#124](https://github.com/equinor/webviz-core-components/pull/124) - `SmartNodeSelector` now returns all selected tags (also invalid and duplicate ones) to parent.
 - [#123](https://github.com/equinor/webviz-core-components/pull/123) - Removed unused variables and added types to `SmartNodeSelector` and its tests.
@@ -84,7 +90,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [#122](https://github.com/equinor/webviz-core-components/pull/122) - Fixed bug in `WebvizPluginPlaceholder` preventing download button from working. Added tests for `WebvizPluginPlaceholder`.
 - [#120](https://github.com/equinor/webviz-core-components/pull/120) - Multiple bug fixes (deletion of currently selected tag not possible; state not dynamically updated;
-    empty or invalid node names no longer allowed; auto resizing not working when initializing tag component) and new tests for these bugs. Also removed unnecessary properties.
+  empty or invalid node names no longer allowed; auto resizing not working when initializing tag component) and new tests for these bugs. Also removed unnecessary properties.
 
 ## [0.4.0] - 2021-04-26
 
@@ -127,7 +133,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - [#100](https://github.com/equinor/webviz-core-components/pull/100) - Adjusted build environment in order to be able to write
-    components in TypeScript and to publish to npm. Also changed all components to TypeScript.
+  components in TypeScript and to publish to npm. Also changed all components to TypeScript.
 
 ## [0.2.0] - 2021-03-11
 

react/src/demo/App.tsx

@@ -118,7 +118,6 @@ const App: React.FC = () => {
                     <SmartNodeSelector
                         id="SmartNodeSelector"
                         key="SmartNodeSelector"
-                        maxNumSelectedNodes={1}
                         numMetaNodes={2}
                         delimiter=":"
                         setProps={setNodeSelectorState}

react/src/lib/components/SmartNodeSelector/components/SmartNodeSelector.css

@@ -159,7 +159,7 @@
     flex-wrap: wrap;
     border-radius: 4px;
     background-color: #fefefe;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
     min-width: 0;
     position: relative;

react/src/lib/components/SmartNodeSelector/components/Suggestions.css

@@ -4,19 +4,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
- 
+
 .Suggestions {
+    box-sizing: border-box;
     position: absolute;
-    z-index: 99;
     top: 100%;
     left: -1px;
     right: -1px;
     border: 1px #ccc solid;
     border-radius: 0px 0px 4px 4px;
     background-color: white;
     overflow-y: auto;
-    -webkit-box-shadow: 0px 4px 5px -1px rgba(0,0,0,0.2); 
-    box-shadow: 0px 4px 5px -1px rgba(0,0,0,0.2);
+    -webkit-box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.2);
+}
+
+.Suggestions__Position {
+    visibility: hidden;
 }
 
 .Suggestions__Ruler {