From 69f55a07bd175ba65c9fa396934bbd51447cfffc Mon Sep 17 00:00:00 2001
From: Dan <daniel.h.funk@gmail.com>
Date: Wed, 16 Nov 2022 15:36:12 -0500
Subject: [PATCH] Minor tweak, in the hopes of getting a text box to update
 correctly.

---
 .../src/components/ProcessSearch.tsx          | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 spiffworkflow-frontend/src/components/ProcessSearch.tsx

diff --git a/spiffworkflow-frontend/src/components/ProcessSearch.tsx b/spiffworkflow-frontend/src/components/ProcessSearch.tsx
new file mode 100644
index 000000000..7637760a5
--- /dev/null
+++ b/spiffworkflow-frontend/src/components/ProcessSearch.tsx
@@ -0,0 +1,53 @@
+import {
+  ComboBox,
+  // @ts-ignore
+} from '@carbon/react';
+import { truncateString } from '../helpers';
+import { ProcessReference } from '../interfaces';
+
+type OwnProps = {
+  onChange: (..._args: any[]) => any;
+  processes: ProcessReference[];
+  selectedItem?: ProcessReference | null;
+  titleText?: string;
+  height?: string;
+};
+
+export default function ProcessSearch({
+  processes,
+  selectedItem,
+  onChange,
+  titleText = 'Process model',
+  height = '50px',
+}: OwnProps) {
+  const shouldFilter = (options: any) => {
+    const process: ProcessReference = options.item;
+    const { inputValue } = options;
+    return `${process.identifier} (${process.display_name})`.includes(
+      inputValue
+    );
+  };
+  return (
+    <div style={{ width: '100%', height }}>
+      <ComboBox
+        onChange={onChange}
+        id="process-model-select"
+        data-qa="process-model-selection"
+        items={processes}
+        itemToString={(process: ProcessReference) => {
+          if (process) {
+            return `${process.identifier} (${truncateString(
+              process.display_name,
+              20
+            )})`;
+          }
+          return null;
+        }}
+        shouldFilterItem={shouldFilter}
+        placeholder="Choose a process"
+        titleText={titleText}
+        selectedItem={selectedItem}
+      />
+    </div>
+  );
+}