diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
index 0974905f8b..8f2f8432b8 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
@@ -279,7 +279,7 @@ class Material extends Component {
 
   yieldOrConversionRate(material) {
     const { reaction, displayYieldField } = this.props;
-    if (displayYieldField) {
+    if (displayYieldField === true || displayYieldField === null) {
       return (
         <div>
           <FormControl
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
index 88ce1125ee..be83d1f70b 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/MaterialGroup.js
@@ -161,10 +161,14 @@ function GeneralMaterialGroup({
     + ' The conversion will not be displayed as part of the reaction scheme';
     const yieldText = 'Click to switch to yield field.'
     + ' The yield will be displayed as part of the reaction scheme';
+    let conversionOrYield = displayYieldField;
+    if (displayYieldField || displayYieldField === null) {
+      conversionOrYield = true;
+    }
     return (
       <div>
         <ToggleButton
-          isToggledInitial={displayYieldField}
+          isToggledInitial={conversionOrYield}
           onToggle={switchYield}
           onLabel="Yield"
           offLabel="Conv."
@@ -365,13 +369,13 @@ SolventsMaterialGroup.propTypes = {
 MaterialGroup.defaultProps = {
   showLoadingColumn: false,
   lockEquivColumn: false,
-  displayYieldField: true
+  displayYieldField: null
 };
 
 GeneralMaterialGroup.defaultProps = {
   showLoadingColumn: false,
   lockEquivColumn: false,
-  displayYieldField: true
+  displayYieldField: null
 };
 
 export { MaterialGroup, GeneralMaterialGroup, SolventsMaterialGroup };
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
index 3a2a3ffc91..4d0c568fa3 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsScheme.js
@@ -46,7 +46,7 @@ export default class ReactionDetailsScheme extends Component {
     this.state = {
       reaction,
       lockEquivColumn: false,
-      displayYieldField: true,
+      displayYieldField: null,
       cCon: false,
       reactionDescTemplate: textTemplate.toJS(),
       open: true,
@@ -139,10 +139,10 @@ export default class ReactionDetailsScheme extends Component {
     this.setState({ lockEquivColumn: !lockEquivColumn });
   }
 
-  switchYield() {
+  switchYield = (shouldDisplayYield) => {
     const { displayYieldField } = this.state;
-    this.setState({ displayYieldField: !displayYieldField });
-  }
+    this.setState({ displayYieldField: shouldDisplayYield ?? !displayYieldField });
+  };
 
   handleOnConditionSelect(eventKey) {
     const { reaction } = this.props;
@@ -1214,6 +1214,15 @@ export default class ReactionDetailsScheme extends Component {
       reaction.markSampleAsReference(refM.id);
     }
 
+    if (displayYieldField === null) {
+      const allHaveNoConversion = reaction.products.every(
+        (material) => material.conversion_rate && material.conversion_rate !== 0
+      );
+      if (allHaveNoConversion) {
+        this.switchYield(!allHaveNoConversion);
+      }
+    }
+
     const headReactants = reaction.starting_materials.length ?? 0;
     return (
       <div>
diff --git a/app/packs/src/components/common/ToggleButton.js b/app/packs/src/components/common/ToggleButton.js
index 8e8a873c5f..b66b991c01 100644
--- a/app/packs/src/components/common/ToggleButton.js
+++ b/app/packs/src/components/common/ToggleButton.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
@@ -15,6 +15,10 @@ export default function ToggleButton({
     if (onChange) onChange(newToggledState);
   };
 
+  useEffect(() => {
+    setIsToggled(isToggledInitial);
+  }, [isToggledInitial]);
+
   const buttonColor = isToggled ? onColor : offColor;
   const toolTipMessage = isToggled ? tooltipOn : tooltipOff;