diff --git a/app/src/componentLibrary/attributeEditor/attributeEditor.jsx b/app/src/componentLibrary/attributeEditor/attributeEditor.jsx
index def8a42a8b..70d40eca6b 100644
--- 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}
/>
@@ -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
index 4aea54ab7a..188b1097fe 100644
--- 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}
/>
)}
@@ -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
index 3ebeea79cc..998380ced4 100644
--- 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 {
{attributesValue.length > 0 && (