fixed bug where transition label wasn't being set when clicked somewhere inside topbarDialog in Playground

Author: anserwaseem

src/features/Playground.tsx

@@ -62,7 +62,19 @@ const Playground = (props: PlaygroundProps) => {
         <div
           className="canvasStyle"
           id="canvas"
-          onClick={() => props.handleSelect(null)}
+          onClick={(event) => {
+            console.log("canvas clicked", event);
+            // reset selected state if clicked outside topbarDialog 
+            if (
+              !(
+                (event.target as any)?.id?.includes("topbarDialog") ||
+                (event.target as any)?.nextElementSibling?.id?.includes(
+                  "topbarDialog"
+                )
+              )
+            )
+              props.handleSelect(null);
+          }}
         >
           <div
             id="statesContainer"

src/features/components/playground/TopBar.tsx

@@ -464,16 +464,19 @@ export const TopBar = (props: TopBarProps) => {
   return (
     <>
       <Dialog
+        id="topbarDialog"
         open={isTopbarDialogOpen}
         onClose={() => setIsTopbarDialogOpen(false)}
       >
-        <DialogTitle>
+        <DialogTitle id="topbarDialogTitle">
           {dialogType
             ? "Enter new Transition label(s)"
             : "Enter New State Name"}
         </DialogTitle>
-        <DialogContent>
-          <DialogContentText>{topbarDialogError}</DialogContentText>
+        <DialogContent id="topbarDialogContent">
+          <DialogContentText id="topbarDialogContentText">
+            {topbarDialogError}
+          </DialogContentText>
           <TextField
             autoFocus
             margin="dense"
@@ -482,6 +485,7 @@ export const TopBar = (props: TopBarProps) => {
             type="text"
             fullWidth
             variant="standard"
+            autoComplete="off"
             value={topbarDialogValue}
             onChange={(e) =>
               setTopbarDialogValue(
@@ -494,7 +498,7 @@ export const TopBar = (props: TopBarProps) => {
             }
           />
         </DialogContent>
-        <DialogActions>
+        <DialogActions id="topbarDialogActions">
           <Button onClick={() => setIsTopbarDialogOpen(false)}>Cancel</Button>
           <Button
             onClick={() => {