fix: make inputs look and behave disabled when flow is in published state

packages/web/src/components/ControlledCustomAutocomplete/index.jsx

@@ -61,31 +61,38 @@ function ControlledCustomAutocomplete(props) {
   const [isSingleChoice, setSingleChoice] = React.useState(undefined);
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
+
   const renderElement = React.useCallback(
     (props) => <Element {...props} disabled={disabled} />,
     [disabled],
   );
+
   const [editor] = React.useState(() => customizeEditor(createEditor()));
+
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
   let dependsOnValues = [];
   if (dependsOn?.length) {
     dependsOnValues = watch(dependsOn);
   }
+
   React.useEffect(() => {
     const ref = ReactEditor.toDOMNode(editor, editor);
     resizeObserver.observe(ref);
     return () => resizeObserver.unobserve(ref);
   }, []);
+
   const promoteValue = () => {
     const serializedValue = serialize(editor.children);
     controllerOnChange(serializedValue);
   };
+
   const resizeObserver = React.useMemo(function syncCustomOptionsPosition() {
     return new ResizeObserver(() => {
       forceUpdate();
     });
   }, []);
+
   React.useEffect(() => {
     const hasDependencies = dependsOnValues.length;
     if (hasDependencies) {
@@ -93,6 +100,7 @@ function ControlledCustomAutocomplete(props) {
       resetEditor(editor);
     }
   }, dependsOnValues);
+
   React.useEffect(
     function updateInitialValue() {
       const hasOptions = options.length;
@@ -110,16 +118,19 @@ function ControlledCustomAutocomplete(props) {
     },
     [isInitialValueSet, options, loading],
   );
+
   React.useEffect(() => {
     if (!showVariableSuggestions && value !== serialize(editor.children)) {
       promoteValue();
     }
   }, [showVariableSuggestions]);
+
   const hideSuggestionsOnShift = (event) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
   };
+
   const handleKeyDown = (event) => {
     hideSuggestionsOnShift(event);
     if (event.code === 'Tab') {
@@ -129,15 +140,18 @@ function ControlledCustomAutocomplete(props) {
       event.preventDefault();
     }
   };
+
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
   }, [priorStepsWithExecutions]);
+
   const handleVariableSuggestionClick = React.useCallback(
     (variable) => {
       insertVariable(editor, variable, stepsWithVariables);
     },
     [stepsWithVariables],
   );
+
   const handleOptionClick = React.useCallback(
     (event, option) => {
       event.stopPropagation();
@@ -147,17 +161,20 @@ function ControlledCustomAutocomplete(props) {
     },
     [stepsWithVariables],
   );
+
   const handleClearButtonClick = (event) => {
     event.stopPropagation();
     resetEditor(editor);
     promoteValue();
     setSingleChoice(undefined);
   };
+
   const reset = (tabIndex) => {
     const isOptions = tabIndex === 0;
     setSingleChoice(isOptions);
     resetEditor(editor, { focus: true });
   };
+
   return (
     <Slate
       editor={editor}