#4154 - Cannot select bonds when we add molecule with addFragment

ketcher-autotests/tests/Macromolecule-editor/RNA-Builder/rna-library.spec.ts

@@ -515,18 +515,30 @@ test.describe('RNA Library', () => {
     Test is not working properly. Need fix bug https://github.com/epam/ketcher/issues/3489
     */
     const monomers = [
-      { type: 'sugar', name: "3A6___6-amino-hexanol (3' end)" },
-      { type: 'base', name: 'baA___N-benzyl-adenine' },
-      { type: 'phosphate', name: 'bP___Boranophosphate' },
+      {
+        type: 'sugar',
+        groupName: 'Sugars',
+        name: "3A6___6-amino-hexanol (3' end)",
+      },
+      { type: 'base', groupName: 'Bases', name: 'baA___N-benzyl-adenine' },
+      {
+        type: 'phosphate',
+        groupName: 'Phosphates',
+        name: 'bP___Boranophosphate',
+      },
     ];
 
     await expandCollapseRnaBuilder(page);
 
     for (const monomer of monomers) {
       await page.getByTestId(`rna-builder-slot--${monomer.type}`).click();
       await page.getByTestId(monomer.name).click();
+      await page
+        .getByTestId(`rna-accordion-details-${monomer.groupName}`)
+        .hover();
+      await page.mouse.wheel(0, 0);
       await clickInTheMiddleOfTheScreen(page);
-      await takeMonomerLibraryScreenshot(page);
+      await takeMonomerLibraryScreenshot(page, { maxDiffPixelRatio: 0.03 });
     }
   });
 

ketcher-autotests/tests/Templates/Template-Manipulations/Template-manipulations.spec.ts

@@ -44,6 +44,7 @@ import {
   openDropdown,
   selectDropdownTool,
   getCoordinatesOfTheMiddleOfTheScreen,
+  delay,
 } from '@utils';
 import { getRotationHandleCoordinates } from '@utils/clicks/selectButtonByTitle';
 import { getMolfile, getRxn } from '@utils/formats';
@@ -240,6 +241,7 @@ test.describe('Template Manupulations', () => {
     Description:
     With Selection Tool (Lasso or Rectangle) click any atom of the template structure and type any correct atom symbol.
     */
+    const delayInSeconds = 0.5;
     await selectAtom(AtomButton.Sulfur, page);
     await clickInTheMiddleOfTheScreen(page);
     await selectDropdownTool(page, 'rgroup-label', 'rgroup-attpoints');
@@ -248,7 +250,10 @@ test.describe('Template Manupulations', () => {
     await takeEditorScreenshot(page);
     await page.getByTestId('OK').click();
     await selectDropdownTool(page, 'select-rectangle', 'select-fragment');
+    // To stabilize the behavior
+    await delay(delayInSeconds);
     await page.getByTestId('canvas').getByText('S').first().click();
+    await takePageScreenshot(page);
     await page.getByTestId('canvas').getByText('S').first().click({
       button: 'right',
     });

packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx

@@ -223,6 +223,7 @@ export const RnaAccordion = ({ libraryName, duplicatePreset, editPreset }) => {
           <StyledAccordion
             key={groupData.groupName}
             data-testid="styled-accordion"
+            dataTestIdDetails={`rna-accordion-details-${groupData.groupName}`}
             summary={summary}
             details={details}
             expanded={expanded}

packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaAccordion/__snapshots__/RnaAccordion.test.tsx.snap

@@ -149,6 +149,7 @@ exports[`Test Rna Accordion component should render 1`] = `
     </div>
     <div
       class="css-4wpvad"
+      data-testid="rna-accordion-details-Sugars"
     >
       <div
         class="css-9bccu"
@@ -219,6 +220,7 @@ exports[`Test Rna Accordion component should render 1`] = `
     </div>
     <div
       class="css-4wpvad"
+      data-testid="rna-accordion-details-Bases"
     >
       <div
         class="css-9bccu"
@@ -287,6 +289,7 @@ exports[`Test Rna Accordion component should render 1`] = `
     </div>
     <div
       class="css-4wpvad"
+      data-testid="rna-accordion-details-Phosphates"
     >
       <div
         class="css-9bccu"

packages/ketcher-react/src/components/Accordion/Accordion.tsx

@@ -22,11 +22,14 @@ export const Accordion = ({
   expanded,
   className,
   onSummaryClick,
+  dataTestIdDetails,
 }: IAccordionProps) => {
   return (
     <Container className={className}>
       <SummaryContainer onClick={onSummaryClick}>{summary}</SummaryContainer>
-      <DetailsContainer expanded={expanded}>{details}</DetailsContainer>
+      <DetailsContainer data-testid={dataTestIdDetails} expanded={expanded}>
+        {details}
+      </DetailsContainer>
     </Container>
   );
 };

packages/ketcher-react/src/components/Accordion/types.ts

@@ -20,6 +20,7 @@ export interface IAccordionProps {
   expanded: boolean;
   onSummaryClick: React.MouseEventHandler<HTMLDivElement>;
   className?: string;
+  dataTestIdDetails?: string;
 }
 
 export interface IDetailsContainerProps {

packages/ketcher-react/src/script/editor/Editor.ts

@@ -297,6 +297,10 @@ class Editor implements KetcherEditor {
   structToAddFragment(value: Struct): Struct {
     const superStruct = value.mergeInto(this.render.ctab.molecule);
 
+    setTimeout(() => {
+      this.selection('all');
+      this.selection(null);
+    }, 0);
     return this.renderAndRecoordinateStruct(superStruct);
   }