Skip to content

The width value of the Jsme component is displayed incorrectly in the modal window #21

@hellhorse123

Description

@hellhorse123

In this React TS component i get next behavior:
After reopen Modal window, my Jsme drawer scene become this width:
Screenshot 2023-12-29 at 08 20 36
Screenshot 2023-12-29 at 08 20 59

If you click where the scene should be (sometimes several times), everything returns to normal

import { useEffect, useState } from "react";
import { Jsme } from "jsme-react";

interface ModalProps {
  onOk: any;
  onCancel: (e: React.MouseEvent) => void;
  defaultSmilesValue: string;
  isModalOpen: boolean;
}

export const ModalContentDrawer: React.FC<ModalProps> = ({
  onOk,
  onCancel,
  defaultSmilesValue,
  isModalOpen,
  isLoading,
}) => {
  const [drawerSmiles, setDrawerSmiles] = useState(defaultSmilesValue);

  useEffect(() => {
    setDrawerSmiles(defaultSmilesValue);
  }, [defaultSmilesValue]);


  return (
    <ModalComponent
      modalTitle={"Structure"}
      isModalOpen={isModalOpen}
      onOk={onOk}
      onCancel={onCancel}
      width={930}
    >
      <div className="modal-drawer-container">
        <Jsme
          width="100%"
          height="460px"
          options="newlook, border"
          smiles={drawerSmiles}
          onChange={setDrawerSmiles}
        />
      </div>
    </ModalComponent>
  );
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions