Avoid flickering when checking calendar events (#932)

src/ui/views/Board/components/Board/ColumnHeader.svelte

@@ -36,6 +36,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     if (closestAnchor.hasClass("internal-link")) {
       event.preventDefault();
 

src/ui/views/Calendar/CalendarView.svelte

@@ -125,6 +125,17 @@
     }
   }
 
+  function handleRecordCheck(record: DataRecord) {
+    if (booleanField) {
+      api.updateRecord(
+        updateRecordValues(record, {
+          [booleanField.name]: !record.values[booleanField.name],
+        }),
+        fields
+      );
+    }
+  }
+
   function handleRecordClick(entry: DataRecord) {
     if (entry) {
       new EditNoteModal(
@@ -261,6 +272,9 @@
               onRecordChange={(record) => {
                 handleRecordChange(date, record);
               }}
+              onRecordCheck={(record) => {
+                handleRecordCheck(record);
+              }}
               onRecordAdd={() => {
                 handleRecordAdd(date);
               }}

src/ui/views/Calendar/components/Calendar/Day.svelte

@@ -32,6 +32,11 @@
    */
   export let onRecordClick: (record: DataRecord) => void;
 
+  /**
+   * onRecordCheck runs when the user Checks / Unchecks a calendar event.
+   */
+  export let onRecordCheck: (record: DataRecord) => void;
+
   /**
    * onRecordChange runs when the user changes the checked state.
    */
@@ -69,7 +74,13 @@
   style:width={width + "%"}
 >
   <Date {today}>{date.date()}</Date>
-  <EventList {checkField} {records} {onRecordClick} {onRecordChange} />
+  <EventList
+    {checkField}
+    {records}
+    {onRecordClick}
+    {onRecordCheck}
+    {onRecordChange}
+  />
 </div>
 
 <style>

src/ui/views/Calendar/components/Calendar/EventList.svelte

@@ -10,14 +10,14 @@
     DataValue,
     Optional,
   } from "src/lib/dataframe/dataframe";
-  import { updateRecordValues } from "src/lib/datasources/helpers";
   import { getRecordColorContext, handleHoverLink } from "src/ui/views/helpers";
   import { settings } from "src/lib/stores/settings";
 
   export let records: DataRecord[];
   export let checkField: string | undefined;
 
   export let onRecordClick: (record: DataRecord) => void;
+  export let onRecordCheck: (record: DataRecord) => void;
   export let onRecordChange: (record: DataRecord) => void;
 
   function asOptionalBoolean(value: Optional<DataValue>): Optional<boolean> {
@@ -62,17 +62,8 @@
         checked={checkField !== undefined
           ? asOptionalBoolean(record.values[checkField])
           : undefined}
-        on:check={({ detail: checked }) => {
-          if (checkField) {
-            onRecordChange(
-              updateRecordValues(record, {
-                [checkField]: checked,
-              })
-            );
-          }
-        }}
-        on:click={() => {
-          onRecordClick(record);
+        on:check={() => {
+          onRecordCheck(record);
         }}
       >
         <InternalLink

src/ui/views/Table/components/DataGrid/GridCell/GridListCell/RichTextTag.svelte

@@ -30,6 +30,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     if (closestAnchor.hasClass("internal-link")) {
       event.preventDefault();
 

src/ui/views/Table/components/DataGrid/GridCell/GridTextCell/TextLabel.svelte

@@ -29,6 +29,8 @@
       return;
     }
 
+    event.stopPropagation();
+
     if (closestAnchor.hasClass("internal-link")) {
       event.preventDefault();