feature/IO-3550-Labor-Adjustment-Popover - Fix

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -1,7 +1,6 @@
 import { DeleteFilled, DollarCircleFilled } from "@ant-design/icons";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Checkbox, Form, Input, InputNumber, Select, Space, Switch, Table, Tooltip } from "antd";
-import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -33,7 +32,6 @@ export function BillEnterModalLinesComponent({
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
-  const firstFieldRefs = useRef({});
 
   const CONTROL_HEIGHT = 32;
 
@@ -157,9 +155,6 @@ export function BillEnterModalLinesComponent({
         ),
         formInput: (record, index) => (
           <BillLineSearchSelect
-            ref={(el) => {
-              firstFieldRefs.current[index] = el;
-            }}
             disabled={disabled}
             options={lineData}
             style={{
@@ -210,7 +205,7 @@ export function BillEnterModalLinesComponent({
           label: t("billlines.fields.line_desc"),
           rules: [{ required: true }]
         }),
-        formInput: () => <Input.TextArea disabled={disabled} autoSize tabIndex={0} />
+        formInput: () => <Input.TextArea disabled={disabled} autoSize />
       },
       {
         title: t("billlines.fields.quantity"),
@@ -239,7 +234,7 @@ export function BillEnterModalLinesComponent({
             })
           ]
         }),
-        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} tabIndex={0} />
+        formInput: () => <InputNumber precision={0} min={1} disabled={disabled} />
       },
       {
         title: t("billlines.fields.actual_price"),
@@ -256,7 +251,6 @@ export function BillEnterModalLinesComponent({
           <CurrencyInput
             min={0}
             disabled={disabled}
-            tabIndex={0}
             // NOTE: Autofill should only happen on forward Tab out of Retail
             onKeyDown={(e) => {
               if (e.key === "Tab" && !e.shiftKey) autofillActualCost(index);
@@ -334,7 +328,6 @@ export function BillEnterModalLinesComponent({
                     min={0}
                     disabled={disabled}
                     controls={false}
-                    tabIndex={0}
                     style={{ width: "100%", height: CONTROL_HEIGHT }}
                     // NOTE: No auto-fill on focus/blur; only triggered from Retail on Tab
                   />
@@ -399,7 +392,7 @@ export function BillEnterModalLinesComponent({
           rules: [{ required: true }]
         }),
         formInput: () => (
-          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled} tabIndex={0}>
+          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
             {bodyshopHasDmsKey(bodyshop)
               ? CiecaSelect(true, false)
               : responsibilityCenters.costs.map((item) => <Select.Option key={item.name}>{item.name}</Select.Option>)}
@@ -419,7 +412,7 @@ export function BillEnterModalLinesComponent({
                 name: [field.name, "location"]
               }),
               formInput: () => (
-                <Select disabled={disabled} tabIndex={0}>
+                <Select disabled={disabled}>
                   {bodyshop.md_parts_locations.map((loc, idx) => (
                     <Select.Option key={idx} value={loc}>
                       {loc}
@@ -439,7 +432,7 @@ export function BillEnterModalLinesComponent({
           key: `${field.name}deductedfromlbr`,
           name: [field.name, "deductedfromlbr"]
         }),
-        formInput: () => <Switch disabled={disabled} tabIndex={0} />,
+        formInput: () => <Switch disabled={disabled} />,
         additional: (record, index) => (
           <Form.Item shouldUpdate noStyle style={{ display: "inline-block" }}>
             {() => {
@@ -530,7 +523,7 @@ export function BillEnterModalLinesComponent({
                 rome: false
               })
             }),
-            formInput: () => <Switch disabled={disabled} tabIndex={0} />
+            formInput: () => <Switch disabled={disabled} />
           }
         ]
       }),
@@ -545,7 +538,7 @@ export function BillEnterModalLinesComponent({
           valuePropName: "checked",
           name: [field.name, "applicable_taxes", "state"]
         }),
-        formInput: () => <Switch disabled={disabled} tabIndex={0} />
+        formInput: () => <Switch disabled={disabled} />
       },
 
       ...InstanceRenderManager({
@@ -561,7 +554,7 @@ export function BillEnterModalLinesComponent({
               valuePropName: "checked",
               name: [field.name, "applicable_taxes", "local"]
             }),
-            formInput: () => <Switch disabled={disabled} tabIndex={0} />
+            formInput: () => <Switch disabled={disabled} />
           }
         ]
       }),
@@ -581,7 +574,6 @@ export function BillEnterModalLinesComponent({
                     icon={<DeleteFilled />}
                     disabled={disabled || invLen > 0}
                     onClick={() => remove(record.name)}
-                    tabIndex={0}
                   />
 
                   {Simple_Inventory.treatment === "on" && (
@@ -653,19 +645,12 @@ export function BillEnterModalLinesComponent({
                 <Button
                   disabled={disabled}
                   onClick={() => {
-                    const newIndex = fields.length;
                     add(
                       InstanceRenderManager({
                         imex: { applicable_taxes: { federal: true } },
                         rome: { applicable_taxes: { federal: false } }
                       })
                     );
-                    setTimeout(() => {
-                      const firstField = firstFieldRefs.current[newIndex];
-                      if (firstField?.focus) {
-                        firstField.focus();
-                      }
-                    }, 100);
                   }}
                   style={{ width: "100%" }}
                 >

client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx

@@ -132,7 +132,13 @@ export function LaborAllocationsAdjustmentEdit({
   );
 
   return (
-    <Popover open={open} onOpenChange={(vis) => setOpen(vis)} content={overlay} trigger="click">
+    <Popover
+      getPopupContainer={(trigger) => trigger?.parentElement || document.body}
+      open={open}
+      onOpenChange={(vis) => setOpen(vis)}
+      content={overlay}
+      trigger="click"
+    >
       {children}
     </Popover>
   );