fix(seg): should be able to navigate outside toolbox and come back later (#4196)

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -26,8 +26,8 @@ function Toolbox({
     buttonSection: buttonSectionId,
   });
 
-  const prevButtonIdsRef = useRef();
-  const prevToolboxStateRef = useRef();
+  const prevButtonIdsRef = useRef('');
+  const prevToolboxStateRef = useRef('');
 
   useEffect(() => {
     const currentButtonIdsStr = JSON.stringify(
@@ -130,7 +130,7 @@ function Toolbox({
     );
 
     api.initializeToolOptions(initializeOptionsWithEnhancements);
-  }, [toolbarButtons, api, toolboxState]);
+  }, [toolbarButtons, api, toolboxState, commandsManager, servicesManager]);
 
   const handleToolOptionChange = (toolName, optionName, newValue) => {
     api.handleToolOptionChange(toolName, optionName, newValue);
@@ -147,7 +147,7 @@ function Toolbox({
       {...props}
       title={title}
       toolbarButtons={toolbarButtons}
-      activeToolOptions={toolboxState.toolOptions?.[toolboxState.activeTool]}
+      toolboxState={toolboxState}
       handleToolSelect={id => api.handleToolSelect(id)}
       handleToolOptionChange={handleToolOptionChange}
       onInteraction={onInteraction}

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -19,13 +19,16 @@ function ToolboxUI(props: withAppTypes) {
   const {
     toolbarButtons,
     handleToolSelect,
-    activeToolOptions,
+    toolboxState,
     numRows,
     servicesManager,
     title,
     useCollapsedPanel = true,
   } = props;
 
+  const { activeTool, toolOptions, selectedEvent } = toolboxState;
+  const activeToolOptions = toolOptions?.[activeTool];
+
   const prevToolOptions = usePrevious(activeToolOptions);
 
   useEffect(() => {
@@ -35,7 +38,7 @@ function ToolboxUI(props: withAppTypes) {
 
     activeToolOptions.forEach((option, index) => {
       const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
-      if (!prevOption || option.value !== prevOption.value) {
+      if (!prevOption || option.value !== prevOption.value || selectedEvent) {
         const isOptionValid = option.condition
           ? option.condition({ options: activeToolOptions })
           : true;
@@ -45,7 +48,7 @@ function ToolboxUI(props: withAppTypes) {
         }
       }
     });
-  }, [activeToolOptions]);
+  }, [activeToolOptions, selectedEvent]);
 
   const render = () => {
     return (