Skip to content

Commit

Permalink
Fix: Fix position of resources drop-down menu for tags (#3868)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
a-h-abdelsalam authored Sep 20, 2023
1 parent 99012ea commit 07595f7
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
34 changes: 32 additions & 2 deletions src/web/components/form/__tests__/selectelement.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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} />);
Expand All @@ -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();
});

Expand Down
5 changes: 4 additions & 1 deletion src/web/components/form/selectelements.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion src/web/pages/tags/dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down

0 comments on commit 07595f7

Please sign in to comment.