Merge pull request #679 from SuperViz/fix/initialize-correct-list-wio

fix: initialize correct list wio

src/components/form-elements/index.ts

@@ -394,15 +394,15 @@ export class FormElements extends BaseComponent {
 
     this.room?.emit(FieldEvents.INTERACTION + target.id, {
       fieldId: target.id,
-      color: this.localParticipant.slot.color,
+      color: this.localParticipant.slot?.color,
     });
 
     const canSync = this.canSyncContent(target.id);
     if (!canSync) return;
 
     const payload: InputPayload & FocusPayload = {
       value: target.value,
-      color: this.localParticipant.slot.color,
+      color: this.localParticipant.slot?.color,
       fieldId: target.id,
       showOutline: this.canUpdateColor(target.id),
       syncContent: canSync,
@@ -604,16 +604,17 @@ export class FormElements extends BaseComponent {
     timestamp,
     ...params
   }: SocketEvent<InputPayload>) => {
-    if (syncContent && this.canSyncContent(fieldId)) {
+    this.publish(FieldEvents.CONTENT_CHANGE, {
+      value,
+      fieldId,
+      attribute,
+      userId: presence.id,
+      userName: presence.name,
+      timestamp,
+    });
+
+    if (syncContent && this.canSyncContent(fieldId) && presence.id !== this.localParticipant.id) {
       this.fields[fieldId][attribute] = value;
-      this.publish(FieldEvents.CONTENT_CHANGE, {
-        value,
-        fieldId,
-        attribute,
-        userId: presence.id,
-        userName: presence.name,
-        timestamp,
-      });
     }
 
     if (showOutline && this.canUpdateColor(fieldId)) {
@@ -659,10 +660,10 @@ export class FormElements extends BaseComponent {
     );
   }
 
-  private canSyncContent(fieldId: string): boolean {
+  private canSyncContent = (fieldId: string): boolean => {
     return (
       (!this.flags.disableRealtimeSync && this.enabledRealtimeSyncFields[fieldId] !== false) ||
-      this.enabledRealtimeSyncFields[fieldId]
+      !!this.enabledRealtimeSyncFields[fieldId]
     );
-  }
+  };
 }

src/components/who-is-online/index.test.ts

@@ -39,6 +39,7 @@ const generateMockParticipant = ({
       name,
       disableDropdown,
       isPrivate,
+      avatar: {},
     },
   };
 

src/components/who-is-online/index.ts

@@ -171,7 +171,7 @@ export class WhoIsOnline extends BaseComponent {
 
     this.room.presence.get((list) => {
       const dataList = list
-        .filter((participant) => participant.data['id'])
+        .filter((participant) => participant.data['id'] && participant.data['avatar'])
         .map(({ data }: { data: any }) => {
           const tooltip = this.getTooltipData(data);
           const controls = this.getControls(data);
@@ -183,6 +183,8 @@ export class WhoIsOnline extends BaseComponent {
           };
         }) as WhoIsOnlineParticipant[];
 
+      if (!dataList.length) return;
+
       const localParticipantIndex = dataList.findIndex((participant) => {
         return participant.id === this.localParticipantId;
       });