scope usePortal false to 3D popups

Author: gabrielburnworth

frontend/farm_designer/move_to.tsx

@@ -167,6 +167,7 @@ export interface GoToThisLocationButtonProps {
   currentBotLocation: BotPosition;
   movementState: MovementState;
   noOptions?: boolean;
+  usePortal?: boolean;
 }
 
 interface GoToThisLocationButtonState {
@@ -222,7 +223,7 @@ export class GoToThisLocationButton
       </button>
       <Popover position={Position.BOTTOM_RIGHT}
         isOpen={this.state.open}
-        usePortal={false}
+        usePortal={this.props.usePortal}
         className={"go-button-axes"}
         popoverClassName={"go-button-axes-popover"}
         target={<button

frontend/plants/edit_plant_status.tsx

@@ -96,7 +96,7 @@ export function EditPlantStatus(props: EditPlantStatusProps) {
   return <div className="grid half-gap">
     <label>{t("Status")}</label>
     <FBSelect
-      usePortal={false}
+      usePortal={props.usePortal}
       list={PLANT_STAGE_LIST()}
       selectedItem={PLANT_STAGE_DDI_LOOKUP()[plantStatus]}
       onChange={ddi =>
@@ -353,13 +353,14 @@ export const PlantSlugBulkUpdate = (props: PlantSlugBulkUpdateProps) => {
 export interface EditWeedStatusProps {
   weed: TaggedWeedPointer;
   updateWeed(update: Partial<TaggedWeedPointer["body"]>): void;
+  usePortal?: boolean;
 }
 
 /** Select a `plant_stage` for a weed. */
 export const EditWeedStatus = (props: EditWeedStatusProps) =>
   <FBSelect
     key={props.weed.uuid}
-    usePortal={false}
+    usePortal={props.usePortal}
     list={WEED_STAGE_LIST()}
     selectedItem={WEED_STAGE_DDI_LOOKUP()[props.weed.body.plant_stage]}
     onChange={ddi =>

frontend/plants/plant_panel.tsx

@@ -54,6 +54,7 @@ interface EditPlantProperty {
 
 export interface EditPlantStatusProps extends EditPlantProperty {
   plantStatus: PlantStage;
+  usePortal?: boolean;
 }
 
 export interface EditDatePlantedProps extends EditPlantProperty {

frontend/three_d_garden/selection/popup_controls.tsx

@@ -70,6 +70,7 @@ const isPlantPointer = (plant: TaggedPlant): plant is TaggedPlantPointer =>
 const GoButton = (props: GoButtonProps) =>
   props.dispatch &&
   <GoToThisLocationButton
+    usePortal={false}
     dispatch={props.dispatch}
     locationCoordinate={props.locationCoordinate}
     botOnline={props.botOnline}
@@ -193,6 +194,7 @@ const PlantPopupControls = (props: PopupControlProps) => {
         </div>
         <EditPlantStatus
           {...commonProps}
+          usePortal={false}
           plantStatus={plant.body.plant_stage} />
       </div>}
     <div className={"row grid-2-col"}>
@@ -231,7 +233,7 @@ const WeedPopupControls = (props: PopupControlProps) => {
     <div className={"row grid-2-col"}>
       <div className={"grid half-gap"}>
         <label>{t("Status")}</label>
-        <EditWeedStatus weed={weed} updateWeed={update} />
+        <EditWeedStatus weed={weed} updateWeed={update} usePortal={false} />
       </div>
       <EditPointRadius
         radius={weed.body.radius}
@@ -268,6 +270,7 @@ const UtmPopupControls = (props: PopupControlProps) => {
     <div className={"object-popup-mounted-tool-row row grid-2-col"}>
       <label>{t("Mounted Tool")}</label>
       <ToolSelection
+        usePortal={false}
         tools={props.tools}
         selectedTool={mountedTool}
         onChange={({ tool_id }) => {

frontend/tools/interfaces.ts

@@ -142,6 +142,7 @@ interface ToolInputPropsBase {
 export interface ToolSelectionProps extends ToolInputPropsBase {
   filterSelectedTool: boolean;
   filterActiveTools: boolean;
+  usePortal?: boolean;
 }
 
 export interface ToolInputRowProps extends ToolInputPropsBase {

frontend/tools/tool_slot_edit_components.tsx

@@ -70,7 +70,7 @@ export const SlotDirectionInputRow = (props: SlotDirectionInputRowProps) => {
 
 export const ToolSelection = (props: ToolSelectionProps) =>
   <FBSelect
-    usePortal={false}
+    usePortal={props.usePortal}
     list={([NULL_CHOICE] as DropDownItem[]).concat(props.tools
       .filter(tool => !props.filterSelectedTool
         || tool.body.id != props.selectedTool?.body.id)