begin converting TagMultiSelect to usePFSelect

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 => (
+      <SelectOption key={option.id} value={option}>
+        {option.name}
+      </SelectOption>
+    ));
+  };
 
   return (
-    <MultiSelect
-      onChange={val => {
-        onChange(arrayToString(val));
+    <Select
+      variant={SelectVariant.typeaheadMulti}
+      onToggle={toggleExpanded}
+      onSelect={onSelect}
+      onClear={() => onChange([])}
+      onFilter={event => {
+        const str = event.target.value.toLowerCase();
+        const matches = options.filter(o => o.name.toLowerCase().includes(str));
+        return renderOptions(matches);
       }}
-      onAddNewItem={newItem => {
-        if (!options.find(o => o.name === newItem.name)) {
-          setOptions(options.concat(newItem));
-        }
+      isCreatable
+      onCreateOption={name => {
+        // TODO check for duplicate in options
+        const newItem = { id: name, name };
+        setOptions(options.concat(newItem));
+        return newItem;
       }}
-      value={stringToArray(value)}
-      options={options}
-      createNewItem={name => ({ id: name, name })}
-    />
+      selections={selections}
+      isExpanded={isExpanded}
+      ariaLabelledBy="tag-select"
+    >
+      {renderOptions(options)}
+    </Select>
   );
+  //
+  // return (
+  //   <MultiSelect
+  //     onChange={val => {
+  //       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 = {

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)
       );

awx/ui_next/src/screens/Template/shared/LabelSelect.jsx

@@ -56,7 +56,6 @@ function LabelSelect({ value, placeholder, onChange, onError }) {
   return (
     <Select
       variant={SelectVariant.typeaheadMulti}
-      aria-label="Select a state"
       onToggle={toggleExpanded}
       onSelect={onSelect}
       onClear={() => onChange([])}