Fix: Fix position of resources drop-down menu for tags (#3868)

* Fix: Fix position of resources drop-down menu for tags

* Refactor: Refactor the search for parent element

* Test: Add test case for position of drop-down menu

src/web/components/form/__tests__/__snapshots__/selectelement.js.snap

@@ -249,6 +249,40 @@ exports[`Menu tests should render with position adjust 1`] = `
 />
 `;
 
+exports[`Menu tests should render with position reference to parent element 1`] = `
+.c0 {
+  outline: 0;
+  border-radius: 0 0 4px 4px;
+  -webkit-transition: opacity 0.1s ease;
+  transition: opacity 0.1s ease;
+  box-shadow: 0 2px 3px 0 rgba(34,36,38,0.15);
+  border: 1px solid #bfbfbf;
+  background-color: #fff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: absolute;
+  z-index: 600;
+  margin-top: -1px;
+  box-sizing: border-box;
+  top: 120px;
+  left: 50px;
+  white-space: nowrap;
+}
+
+<div
+  class="c0"
+  data-testid="select-menu"
+  width="100"
+  x="50"
+  y="120"
+/>
+`;
+
 exports[`Menu tests should render with position right 1`] = `
 .c0 {
   outline: 0;

src/web/components/form/__tests__/selectelement.js

@@ -21,6 +21,7 @@ import {isFunction} from 'gmp/utils/identity';
 
 import {render} from 'web/utils/testing';
 import Theme from 'web/utils/theme';
+import PropTypes from 'web/utils/proptypes';
 
 import {
   Box,
@@ -207,19 +208,43 @@ class MenuTestComponent extends React.Component {
     super(...args);
 
     this.target = React.createRef();
+    this.mockBoundingClientRect = this.props.mockBoundingClientRect;
   }
 
   render() {
     const hasTarget = this.target.current !== null;
+    if (hasTarget && this.mockBoundingClientRect) {
+      const rect = this.target.current.closest('.multiselect-scroll');
+      if (rect !== null) {
+        jest.spyOn(rect, 'getBoundingClientRect').mockImplementation(() => {
+          return {
+            top: 100,
+            bottom: 50,
+            height: 20,
+            width: 100,
+            right: 10,
+            left: 50,
+          };
+        });
+      }
+    }
     return (
       <div>
-        <div ref={this.target} style={{width: '200px', height: '100px'}} />
+        <div
+          ref={this.target}
+          className={this.mockBoundingClientRect ? 'multiselect-scroll' : ''}
+          style={{width: '200px', height: '100px'}}
+        />
         {hasTarget && <Menu {...this.props} target={this.target} />}
       </div>
     );
   }
 }
 
+MenuTestComponent.propTypes = {
+  mockBoundingClientRect: PropTypes.bool,
+};
+
 describe('Menu tests', () => {
   const renderTest = props => {
     const {rerender, ...other} = render(<MenuTestComponent {...props} />);
@@ -229,9 +254,14 @@ describe('Menu tests', () => {
 
   test('should render', () => {
     const {getByTestId} = renderTest();
-
     const menu = getByTestId('select-menu');
+    expect(menu).toMatchSnapshot();
+  });
 
+  test('should render with position reference to parent element', () => {
+    const {getByTestId} = renderTest({mockBoundingClientRect: true});
+    const menu = getByTestId('select-menu');
+    expect(menu).toHaveStyle({top: '120px'});
     expect(menu).toMatchSnapshot();
   });
 

src/web/components/form/selectelements.js

@@ -201,7 +201,10 @@ class MenuComponent extends React.Component {
       return null;
     }
 
-    const rect = target.current.getBoundingClientRect();
+    const rect = hasValue(target.current.closest('.multiselect-scroll'))
+      ? target.current.closest('.multiselect-scroll').getBoundingClientRect()
+      : target.current.getBoundingClientRect();
+
     const {height, width, right, left, top} = rect;
 
     return (

src/web/pages/tags/dialog.js

@@ -255,7 +255,7 @@ class TagDialog extends React.Component {
               )}
               {showResourceSelection && (
                 <FormGroup title={_('Resources')}>
-                  <ScrollableContent>
+                  <ScrollableContent className="multiselect-scroll">
                     <MultiSelect
                       name="resource_ids"
                       items={renderSelectItems(this.state.resourceOptions)}