EPMRPP-83873 || autocomplete menu layout fix (#3695)

* EPMRPP-83873 || autocomplete menu layout fix * EPMRPP-83873 || code review fixes - 1 * EPMRPP-83873 || code review fixes - 2
reportportal · Dec 15, 2023 · 9ba4bef · 9ba4bef
1 parent 0aa47e8
commit 9ba4bef
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 2 deletions.
diff --git a/app/src/componentLibrary/attributeEditor/attributeEditor.jsx b/app/src/componentLibrary/attributeEditor/attributeEditor.jsx
@@ -49,6 +49,7 @@ export const AttributeEditor = ({
   keyPlaceholder,
   valuePlaceholder,
   editorDefaultOpen,
+  autocompleteProps,
 }) => {
   const [keyTouched, setTouchKey] = useState(false);
   const [valueTouched, setTouchValue] = useState(false);
@@ -183,6 +184,7 @@ export const AttributeEditor = ({
           onInputChange={handleAttributeKeyInputChange}
           optionVariant="key-variant"
           menuClassName={cx('menu')}
+          {...autocompleteProps}
         />
       </FieldErrorHint>
       <div className={cx('separator')}>:</div>
@@ -207,6 +209,7 @@ export const AttributeEditor = ({
           isRequired
           optionVariant="value-variant"
           menuClassName={cx('menu')}
+          {...autocompleteProps}
         />
       </FieldErrorHint>
       <div className={cx('buttons')}>
@@ -244,6 +247,7 @@ AttributeEditor.propTypes = {
   keyPlaceholder: PropTypes.string,
   valuePlaceholder: PropTypes.string,
   editorDefaultOpen: PropTypes.bool,
+  autocompleteProps: PropTypes.object,
 };
 AttributeEditor.defaultProps = {
   attributes: [],
@@ -258,4 +262,5 @@ AttributeEditor.defaultProps = {
   keyPlaceholder: 'Key',
   valuePlaceholder: 'Value',
   editorDefaultOpen: false,
+  autocompleteProps: {},
 };
diff --git a/app/src/componentLibrary/attributeList/attributeList.jsx b/app/src/componentLibrary/attributeList/attributeList.jsx
@@ -54,6 +54,7 @@ export const AttributeList = ({
   editable,
   attributesListClassname,
   editorDefaultOpen,
+  autocompleteProps,
 }) => {
   const addNewAttrRef = useRef(null);
   const attributesRefs = useRef(null);
@@ -258,6 +259,7 @@ export const AttributeList = ({
           getURIKey={getURIKey}
           getURIValue={getURIValue}
           editorDefaultOpen={editorDefaultOpen}
+          autocompleteProps={autocompleteProps}
         />
       )}
       <div className={cx('attributes-wrapper')}>
@@ -351,6 +353,7 @@ AttributeList.propTypes = {
   editable: PropTypes.bool,
   attributesListClassname: PropTypes.string,
   editorDefaultOpen: PropTypes.bool,
+  autocompleteProps: PropTypes.object,
 };
 AttributeList.defaultProps = {
   attributes: [],
@@ -371,4 +374,5 @@ AttributeList.defaultProps = {
   editable: true,
   attributesListClassname: '',
   editorDefaultOpen: false,
+  autocompleteProps: {},
 };
diff --git a/app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx b/app/src/componentLibrary/autocompletes/singleAutocomplete/singleAutocomplete.jsx
@@ -54,6 +54,7 @@ export class SingleAutocomplete extends Component {
     refFunction: PropTypes.func,
     stateReducer: PropTypes.func,
     variant: autocompleteVariantType,
+    useFixedPositioning: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -83,6 +84,7 @@ export class SingleAutocomplete extends Component {
     refFunction: () => {},
     stateReducer: (state, changes) => changes,
     variant: 'light',
+    useFixedPositioning: false,
   };
 
   getOptionProps = (getItemProps, highlightedIndex, selectedItem) => ({ item, index, ...rest }) =>
@@ -126,6 +128,7 @@ export class SingleAutocomplete extends Component {
       refFunction,
       stateReducer,
       variant,
+      useFixedPositioning,
       ...props
     } = this.props;
     return (
@@ -199,7 +202,7 @@ export class SingleAutocomplete extends Component {
               </Reference>
               <Popper
                 placement="bottom-start"
-                positionFixed
+                positionFixed={useFixedPositioning}
                 modifiers={{
                   preventOverflow: { escapeWithReference: true },
                   flip: {

diff --git a/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss b/app/src/components/fields/dynamicFieldsSection/dynamicField/dynamicField.scss
@@ -18,7 +18,6 @@
   margin-bottom: 15px;
   padding-right: 45px;
   position: relative;
-  transform: translate(0px, 0px);
 }
 
 .dark {

diff --git a/...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx b/...tainer/content/notifications/modals/addEditNotificationModal/addEditNotificationModal.jsx
@@ -386,6 +386,7 @@ const AddEditNotificationModal = ({
             shown={isEditorShown}
             changeValue={change}
             attributesNote={formatMessage(messages.attributesNote)}
+            autocompleteProps={{ useFixedPositioning: true }}
           />
         </FieldElement>
         {attributesValue.length > 0 && (