Fix room list selection problems

src/components/RoomList.vue

@@ -1,8 +1,8 @@
 <template>
   <v-list dense class="room-list">
-    <v-list-item-group v-model="currentRoomId" color="primary">
+    <v-list-item-group @change="roomChange" color="primary">
 
-      <v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room">
+      <v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
         <v-list-item-avatar class="round" size="42" color="#d9d9d9">
           <v-icon size="11">$vuetify.icons.ic_new_room</v-icon>
         </v-list-item-avatar>
@@ -34,8 +34,7 @@
         </v-list-item-action>
       </v-list-item>
 
-      <v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room.roomId" class="room-list-room"
-        #default="{ active }">
+      <v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room.roomId" class="room-list-room">
         <v-list-item-avatar size="42" color="#d9d9d9">
           <v-img v-if="roomAvatar(room)" :src="roomAvatar(room)" />
           <span v-else class="white--text headline">{{
@@ -51,7 +50,7 @@
           </v-list-item-subtitle>
         </v-list-item-content>
         <v-list-item-action>
-          <v-icon size="16" v-if="active">$vuetify.icons.ic_circle_filled</v-icon>
+          <v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
           <v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
         </v-list-item-action>
       </v-list-item>
@@ -82,7 +81,6 @@ export default {
   },
 
   data: () => ({
-    currentRoomId: null,
     /** A list of rooms currently processing some operation, like "join" or "reject" */
     roomsProcessing: {},
   }),
@@ -95,7 +93,6 @@ export default {
       return this.sortItemsOnName(this.$matrix.joinedRooms);
     },
   },
-
   methods: {
     roomAvatar(room) {
       if (this.isDirect(room)) {
@@ -182,12 +179,10 @@ export default {
 
     isDirect(room) {
       return this.$matrix.isDirectRoom(room);
-    }
-  },
+    },
 
-  watch: {
-    currentRoomId() {
-      if (this.currentRoomId == null) {
+    roomChange(roomId) {
+      if (roomId == null || roomId == undefined || roomId == this.$matrix.currentRoomId) {
         // Ignore, this is caused by "new room" etc.
         return;
       }
@@ -195,11 +190,11 @@ export default {
       this.$navigation.push(
         {
           name: "Chat",
-          params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
+          params: { roomId: util.sanitizeRoomId(roomId) },
         },
         -1
       );
-    },
+  }
   },
 };
 </script>