Fix for IO-2534

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -16,6 +16,7 @@ const BillLineSearchSelect = (
       ref={ref}
       showSearch
       popupMatchSelectWidth={false}
+      optionLabelProp={"name"}
       //  optionFilterProp="line_desc"
       filterOption={(inputValue, option) => {
         return (
@@ -57,6 +58,9 @@ const BillLineSearchSelect = (
               style={{
                 ...(item.removed ? { textDecoration: "line-through" } : {}),
               }}
+              name={`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${
+                  item.oem_partno ? ` - ${item.oem_partno}` : ""
+              }${item.alt_partno ? ` (${item.alt_partno})` : ""}`.trim()}
             >
               <span>
                 {`${item.removed ? `(REMOVED) ` : ""}${item.line_desc}${

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -1,13 +1,14 @@
-import { HeartOutlined } from "@ant-design/icons";
+import {HeartOutlined} from "@ant-design/icons";
-import { Select, Space, Tag } from "antd";
+import {Select, Space, Tag} from "antd";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, {forwardRef, useEffect, useState} from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
-const { Option } = Select;
+
+const {Option} = Select;
 
 //To be used as a form element only.
 
 const VendorSearchSelect = (
-  { value, onChange, options, onSelect, disabled, preferredMake, showPhone },
+    {value, onChange, options, onSelect, disabled, preferredMake, showPhone},
     ref
 ) => {
     const [option, setOption] = useState(value);
@@ -41,6 +42,7 @@ const VendorSearchSelect = (
             optionFilterProp="name"
             onSelect={onSelect}
             disabled={disabled || false}
+            optionLabelProp={"name"}
         >
             {favorites
                 ? favorites.map((o) => (
@@ -51,9 +53,9 @@ const VendorSearchSelect = (
                         discount={o.discount}
                     >
                         <div className="imex-flex-row">
-                <div style={{ flex: 1 }}>{o.name}</div>
+                            <div style={{flex: 1}}>{o.name}</div>
-                <Space style={{ marginLeft: "1rem" }}>
+                            <Space style={{marginLeft: "1rem"}}>
-                  <HeartOutlined style={{ color: "red" }} />
+                                <HeartOutlined style={{color: "red"}}/>
                                 {o.phone && showPhone && (
                                     <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
                                 )}
@@ -68,10 +70,10 @@ const VendorSearchSelect = (
             {options
                 ? options.map((o) => (
                     <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
-              <div className="imex-flex-row" style={{ width: "100%" }}>
+                        <div className="imex-flex-row" style={{width: "100%"}}>
-                <div style={{ flex: 1 }}>{o.name}</div>
+                            <div style={{flex: 1}}>{o.name}</div>
 
-                <Space style={{ marginLeft: "1rem" }}>
+                            <Space style={{marginLeft: "1rem"}}>
                                 {o.phone && showPhone && (
                                     <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>
                                 )}
@@ -81,6 +83,7 @@ const VendorSearchSelect = (
                             </Space>
                         </div>
                     </Option>
+
                 ))
                 : null}
         </Select>