diff --git a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
index a398bc0311..4c988436f3 100644
--- a/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
+++ b/awx/ui_next/src/components/MultiSelect/TagMultiSelect.jsx
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { func, string } from 'prop-types';
-import MultiSelect from './MultiSelect';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import usePFSelect from '@components/MultiSelect/usePFSelect';
function arrayToString(tags) {
return tags.map(v => v.name).join(',');
@@ -21,23 +22,65 @@ function stringToArray(value) {
* is a comma-separated string.
*/
function TagMultiSelect({ onChange, value }) {
- const [options, setOptions] = useState(stringToArray(value));
+ const { selections, onSelect, options, setOptions } = usePFSelect(
+ value, // TODO: convert with stringToArray without triggering re-render loop
+ val => onChange(arrayToString(val))
+ );
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const toggleExpanded = () => {
+ setIsExpanded(!isExpanded);
+ };
+
+ const renderOptions = opts => {
+ return opts.map(option => (
+
+ {option.name}
+
+ ));
+ };
return (
- {
- onChange(arrayToString(val));
+
);
+ //
+ // return (
+ // {
+ // onChange(arrayToString(val));
+ // }}
+ // onAddNewItem={newItem => {
+ // if (!options.find(o => o.name === newItem.name)) {
+ // setOptions(options.concat(newItem));
+ // }
+ // }}
+ // value={stringToArray(value)}
+ // options={options}
+ // createNewItem={name => ({ id: name, name })}
+ // />
+ // );
}
TagMultiSelect.propTypes = {
diff --git a/awx/ui_next/src/components/MultiSelect/usePFSelect.js b/awx/ui_next/src/components/MultiSelect/usePFSelect.js
index d6f2be8646..74d4e89a1b 100644
--- a/awx/ui_next/src/components/MultiSelect/usePFSelect.js
+++ b/awx/ui_next/src/components/MultiSelect/usePFSelect.js
@@ -11,6 +11,7 @@ export default function usePFSelect(value, onChange) {
useEffect(() => {
if (value !== selections && options.length) {
+ console.log(value, typeof value);
const syncedValue = value.map(item =>
options.find(i => i.id === item.id)
);
diff --git a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx b/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx
index 24f1c2fe64..57c1413eca 100644
--- a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx
+++ b/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx
@@ -56,7 +56,6 @@ function LabelSelect({ value, placeholder, onChange, onError }) {
return (