From 1c3d90ade3fd5c6ca05cce53dc9dcb64da9101b3 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Mon, 13 Mar 2023 13:23:11 +0800
Subject: [PATCH 01/11] Shift submenu to bottom

---
 .../feedback-path-panel.component.html        | 18 +++++-----
 .../feedback-path-panel.component.ts          | 35 +++++++++++++++++++
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index 3d839cb71d4..5ea6e618d4f 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -3,26 +3,26 @@
     <b class="feedback-path-title">Feedback Path</b> (Who is giving feedback about whom?)
   </div>
   <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px w-100" autoClose="outside">
-    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle [disabled]="!model.isEditable || commonFeedbackPaths.size === 1">
-      <span *ngIf="!model.isUsingOtherFeedbackPath">
+    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()">
+      <span *ngIf="!model.isUsingOtherFeedbackPath" class="text-wrap">
         {{ model.giverType | giverTypeDescription }} will give feedback on <i class="fas fa-arrow-right"></i> {{ model.recipientType | recipientTypeDescription }}
       </span>
       <span *ngIf="model.isUsingOtherFeedbackPath">Custom feedback path</span>
     </button>
     <ul id="feedback-path-dropdown" ngbDropdownMenu>
       <li class="dropdown-header">Common feedback path combinations</li>
-      <li class="dropdown-item" *ngFor="let path of commonFeedbackPaths | keyvalue">
-        <div ngbDropdown #subMenu="ngbDropdown" placement="right" (mouseenter)="subMenu.open()" (mouseleave)="subMenu.close()">
-          <span ngbDropdownAnchor class="float-end invisible"></span>
-          {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-right"></i>
-          <ul ngbDropdownMenu>
-            <li class="dropdown-item" *ngFor="let recipient of path.value"
+      <li *ngFor="let path of commonFeedbackPaths | keyvalue">
+        <div ngbDropdown #subMenu="ngbDropdown" (click)="toggleSubMenu(path.key)">
+          <!-- <span ngbDropdownAnchor class="float-end invisible"></span> -->
+          <div class="text-wrap dropdown-item"> {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-right"></i> </div>
+          <ul *ngIf="isSubMenuOpen(path.key)">
+            <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value"
                 (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">{{ recipient | recipientTypeDescription }}</li>
           </ul>
         </div>
       </li>
       <li class="dropdown-divider"></li>
-      <li class="dropdown-item" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</li>
+      <li class="text-wrap dropdown-item" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</li>
     </ul>
   </div>
   <div class="row margin-top-15px" *ngIf="model.isUsingOtherFeedbackPath">
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
index 6db44e3a726..8e2a98cff08 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
@@ -69,6 +69,9 @@ export class FeedbackPathPanelComponent {
   @Input()
   allowedFeedbackPaths: Map<FeedbackParticipantType, FeedbackParticipantType[]> = new Map();
 
+  @Input()
+  testMap: Map<FeedbackParticipantType, boolean> = new Map();
+
   @Output()
   customFeedbackPath: EventEmitter<boolean> = new EventEmitter<boolean>();
 
@@ -95,6 +98,38 @@ export class FeedbackPathPanelComponent {
     this.customFeedbackPath.emit(true);
   }
 
+  toggleSubMenu(menu: FeedbackParticipantType): void {
+    this.testMap.set(menu, !this.testMap.get(menu));
+  }
+
+  resetMenu(): void {
+    this.testMap.forEach((_, k) => this.testMap.set(k, false));
+  }
+
+  // showSubMenu(menuToShow: FeedbackParticipantType): void {
+  //   this.testMap.set(menuToShow, true);
+  // }
+
+  // hideSubMenu(menuToHide: FeedbackParticipantType): void {
+  //   this.testMap.set(menuToHide, false);
+  // }
+
+  isSubMenuOpen(menu: FeedbackParticipantType): boolean {
+    let subMenuState: boolean | undefined = this.testMap.get(menu);
+    if (subMenuState === undefined) {
+      subMenuState = false;
+    }
+    return subMenuState;
+    // const boolThing: boolean = this.testMap.get(menu);
+    // return boolThing;
+    // if (this.testMap.get(menu) == undefined) {
+    //   return false;
+    // } else {
+    //   return this.testMap.get(menu);
+    // }
+    //return this.testMap.get(menu);
+  }
+
   /**
    * Change the {@code giverType} and {@code recipientType} and reset the visibility settings.
    */

From 27dd4dff49c80fa80dd9866834d3e37a0e949f36 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Mon, 13 Mar 2023 13:41:10 +0800
Subject: [PATCH 02/11] Clean up code

---
 .../feedback-path-panel.component.html        |  1 -
 .../feedback-path-panel.component.ts          | 24 ++++---------------
 2 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index 5ea6e618d4f..855cf1b4314 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -13,7 +13,6 @@
       <li class="dropdown-header">Common feedback path combinations</li>
       <li *ngFor="let path of commonFeedbackPaths | keyvalue">
         <div ngbDropdown #subMenu="ngbDropdown" (click)="toggleSubMenu(path.key)">
-          <!-- <span ngbDropdownAnchor class="float-end invisible"></span> -->
           <div class="text-wrap dropdown-item"> {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-right"></i> </div>
           <ul *ngIf="isSubMenuOpen(path.key)">
             <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value"
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
index 8e2a98cff08..1abfde7f74a 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
@@ -70,7 +70,7 @@ export class FeedbackPathPanelComponent {
   allowedFeedbackPaths: Map<FeedbackParticipantType, FeedbackParticipantType[]> = new Map();
 
   @Input()
-  testMap: Map<FeedbackParticipantType, boolean> = new Map();
+  subMenuStatuses: Map<FeedbackParticipantType, boolean> = new Map();
 
   @Output()
   customFeedbackPath: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -99,35 +99,19 @@ export class FeedbackPathPanelComponent {
   }
 
   toggleSubMenu(menu: FeedbackParticipantType): void {
-    this.testMap.set(menu, !this.testMap.get(menu));
+    this.subMenuStatuses.set(menu, !this.subMenuStatuses.get(menu));
   }
 
   resetMenu(): void {
-    this.testMap.forEach((_, k) => this.testMap.set(k, false));
+    this.subMenuStatuses.forEach((_, key) => this.subMenuStatuses.set(key, false));
   }
 
-  // showSubMenu(menuToShow: FeedbackParticipantType): void {
-  //   this.testMap.set(menuToShow, true);
-  // }
-
-  // hideSubMenu(menuToHide: FeedbackParticipantType): void {
-  //   this.testMap.set(menuToHide, false);
-  // }
-
   isSubMenuOpen(menu: FeedbackParticipantType): boolean {
-    let subMenuState: boolean | undefined = this.testMap.get(menu);
+    let subMenuState: boolean | undefined = this.subMenuStatuses.get(menu);
     if (subMenuState === undefined) {
       subMenuState = false;
     }
     return subMenuState;
-    // const boolThing: boolean = this.testMap.get(menu);
-    // return boolThing;
-    // if (this.testMap.get(menu) == undefined) {
-    //   return false;
-    // } else {
-    //   return this.testMap.get(menu);
-    // }
-    //return this.testMap.get(menu);
   }
 
   /**

From fe8a7c3d97fd22a5cfaa0ebdc52cda0750c51392 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Mon, 13 Mar 2023 20:02:07 +0800
Subject: [PATCH 03/11] Change to buttons for accessibility and update chevron

---
 .../feedback-path-panel.component.html           | 16 ++++++++++------
 .../feedback-path-panel.component.scss           |  8 ++++++++
 .../feedback-path-panel.component.ts             |  5 ++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index 855cf1b4314..edbd233c5e1 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -3,7 +3,8 @@
     <b class="feedback-path-title">Feedback Path</b> (Who is giving feedback about whom?)
   </div>
   <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px w-100" autoClose="outside">
-    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()">
+    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle 
+            [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()" aria-label="Feedback Path Dropdown">
       <span *ngIf="!model.isUsingOtherFeedbackPath" class="text-wrap">
         {{ model.giverType | giverTypeDescription }} will give feedback on <i class="fas fa-arrow-right"></i> {{ model.recipientType | recipientTypeDescription }}
       </span>
@@ -12,13 +13,16 @@
     <ul id="feedback-path-dropdown" ngbDropdownMenu>
       <li class="dropdown-header">Common feedback path combinations</li>
       <li *ngFor="let path of commonFeedbackPaths | keyvalue">
-        <div ngbDropdown #subMenu="ngbDropdown" (click)="toggleSubMenu(path.key)">
-          <div class="text-wrap dropdown-item"> {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-right"></i> </div>
+        <button class="dropdown-button" ngbDropdown #subMenu="ngbDropdown" (click)="toggleSubMenu(path.key)">
+          <div class="text-wrap dropdown-item"> {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-{{ isSubMenuOpen(path.key) ? 'down' : 'right' }}"></i> </div>
           <ul *ngIf="isSubMenuOpen(path.key)">
-            <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value"
-                (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">{{ recipient | recipientTypeDescription }}</li>
+            <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value">
+              <button class="dropdown-button" (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">
+                {{ recipient | recipientTypeDescription }}
+              </button>
+            </li>
           </ul>
-        </div>
+        </button>
       </li>
       <li class="dropdown-divider"></li>
       <li class="text-wrap dropdown-item" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</li>
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
index 6f729827c61..b89030c7b4d 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
@@ -17,3 +17,11 @@
 .dropdown-item {
   cursor: pointer;
 }
+
+.dropdown-button {
+  border: none;
+  background: none;
+  cursor: inherit;
+  width: 100%;
+  text-align: left;
+}
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
index 1abfde7f74a..74688db776f 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
@@ -69,9 +69,6 @@ export class FeedbackPathPanelComponent {
   @Input()
   allowedFeedbackPaths: Map<FeedbackParticipantType, FeedbackParticipantType[]> = new Map();
 
-  @Input()
-  subMenuStatuses: Map<FeedbackParticipantType, boolean> = new Map();
-
   @Output()
   customFeedbackPath: EventEmitter<boolean> = new EventEmitter<boolean>();
 
@@ -86,6 +83,8 @@ export class FeedbackPathPanelComponent {
   triggerModelChangeBatch: EventEmitter<Partial<QuestionEditFormModel>> =
     new EventEmitter<Partial<QuestionEditFormModel>>();
 
+  subMenuStatuses: Map<FeedbackParticipantType, boolean> = new Map();
+  
   triggerCustomNumberOfEntities(data: number): void {
     this.customNumberOfEntitiesToGiveFeedbackTo.emit(data);
   }

From 5350f20a7cb271b61b4197b0cd918d52c9fdf154 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 10:10:37 +0800
Subject: [PATCH 04/11] Fix screenreader focus

---
 .../feedback-path-panel.component.html        | 30 +++++++++++--------
 .../feedback-path-panel.component.scss        |  1 -
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index edbd233c5e1..baeb9a699ae 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -12,20 +12,26 @@
     </button>
     <ul id="feedback-path-dropdown" ngbDropdownMenu>
       <li class="dropdown-header">Common feedback path combinations</li>
-      <li *ngFor="let path of commonFeedbackPaths | keyvalue">
-        <button class="dropdown-button" ngbDropdown #subMenu="ngbDropdown" (click)="toggleSubMenu(path.key)">
-          <div class="text-wrap dropdown-item"> {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-{{ isSubMenuOpen(path.key) ? 'down' : 'right' }}"></i> </div>
-          <ul *ngIf="isSubMenuOpen(path.key)">
-            <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value">
-              <button class="dropdown-button" (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">
-                {{ recipient | recipientTypeDescription }}
-              </button>
-            </li>
-          </ul>
-        </button>
+      <li *ngFor="let path of commonFeedbackPaths | keyvalue" ngbDropdown #subMenu="ngbDropdown">
+        <div class="dropdown-item">
+          <button class="dropdown-button" (click)="toggleSubMenu(path.key)">
+            {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-{{ isSubMenuOpen(path.key) ? 'down' : 'right' }}"></i>
+          </button>
+        </div>
+        <ul *ngIf="isSubMenuOpen(path.key)">
+          <li class="text-wrap dropdown-item" *ngFor="let recipient of path.value">
+            <button class="dropdown-button" (click)="changeGiverRecipientType(path.key, recipient); mainMenu.close()">
+              {{ recipient | recipientTypeDescription }}
+            </button>
+          </li>
+        </ul>
       </li>
       <li class="dropdown-divider"></li>
-      <li class="text-wrap dropdown-item" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</li>
+      <li class="text-wrap dropdown-item">
+        <button class="dropdown-button" (click)="triggerCustomFeedbackPath(); mainMenu.close()">
+          Custom feedback path...
+        </button>
+      </li>
     </ul>
   </div>
   <div class="row margin-top-15px" *ngIf="model.isUsingOtherFeedbackPath">
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
index b89030c7b4d..79aabc7d057 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.scss
@@ -21,7 +21,6 @@
 .dropdown-button {
   border: none;
   background: none;
-  cursor: inherit;
   width: 100%;
   text-align: left;
 }

From 5a2e95ce1b935c63a26ee33d8187252c1098eb73 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 10:16:26 +0800
Subject: [PATCH 05/11] Lint and test

---
 .../feedback-path-panel.component.ts          |   2 +-
 .../question-edit-form.component.spec.ts.snap |  10 +-
 ...r-session-edit-page.component.spec.ts.snap | 419 +++++-------------
 3 files changed, 113 insertions(+), 318 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
index 74688db776f..b2ca26c5183 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.ts
@@ -84,7 +84,7 @@ export class FeedbackPathPanelComponent {
     new EventEmitter<Partial<QuestionEditFormModel>>();
 
   subMenuStatuses: Map<FeedbackParticipantType, boolean> = new Map();
-  
+
   triggerCustomNumberOfEntities(data: number): void {
     this.customNumberOfEntitiesToGiveFeedbackTo.emit(data);
   }
diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index 46031718719..8faef19178d 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -239,12 +239,14 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
             >
               <button
                 aria-expanded="false"
+                aria-label="Feedback Path Dropdown"
                 class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                 disabled=""
                 id="btn-feedback-path"
                 ngbdropdowntoggle=""
               >
                 <span
+                  class="text-wrap"
                   style=""
                 >
                    Students in this course will give feedback on 
@@ -268,9 +270,13 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
                   class="dropdown-divider"
                 />
                 <li
-                  class="dropdown-item"
+                  class="text-wrap dropdown-item"
                 >
-                  Custom feedback path...
+                  <button
+                    class="dropdown-button"
+                  >
+                     Custom feedback path... 
+                  </button>
                 </li>
               </ul>
             </div>
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index d13d0869f1e..6964dacbab6 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1447,11 +1447,13 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                     >
                       <button
                         aria-expanded="false"
+                        aria-label="Feedback Path Dropdown"
                         class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                         id="btn-feedback-path"
                         ngbdropdowntoggle=""
                       >
                         <span
+                          class="text-wrap"
                           style=""
                         >
                            Students in this course will give feedback on 
@@ -1472,139 +1474,67 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           Common feedback path combinations
                         </li>
                         <li
-                          class="dropdown-item"
+                          ngbdropdown=""
                           style=""
                         >
                           <div
-                            ngbdropdown=""
-                            placement="right"
+                            class="dropdown-item"
                           >
-                            <span
-                              aria-expanded="false"
-                              class="dropdown-toggle float-end invisible"
-                              ngbdropdownanchor=""
-                            />
-                             Instructors in this course will give feedback on ... 
-                            <i
-                              class="fas fa-caret-right"
-                            />
-                            <ul
-                              class="dropdown-menu"
-                              ngbdropdownmenu=""
+                            <button
+                              class="dropdown-button"
                             >
-                              <li
-                                class="dropdown-item"
-                              >
-                                Nobody specific (For general class feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver (Self feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Instructors in the course
-                              </li>
-                            </ul>
+                               Instructors in this course will give feedback on ... 
+                              <i
+                                class="fa-caret-right fas"
+                              />
+                            </button>
                           </div>
                         </li>
                         <li
-                          class="dropdown-item"
+                          ngbdropdown=""
                           style=""
                         >
                           <div
-                            ngbdropdown=""
-                            placement="right"
+                            class="dropdown-item"
                           >
-                            <span
-                              aria-expanded="false"
-                              class="dropdown-toggle float-end invisible"
-                              ngbdropdownanchor=""
-                            />
-                             Feedback session creator (i.e., me) will give feedback on ... 
-                            <i
-                              class="fas fa-caret-right"
-                            />
-                            <ul
-                              class="dropdown-menu"
-                              ngbdropdownmenu=""
+                            <button
+                              class="dropdown-button"
                             >
-                              <li
-                                class="dropdown-item"
-                              >
-                                Nobody specific (For general class feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver (Self feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Instructors in the course
-                              </li>
-                            </ul>
+                               Feedback session creator (i.e., me) will give feedback on ... 
+                              <i
+                                class="fa-caret-right fas"
+                              />
+                            </button>
                           </div>
                         </li>
                         <li
-                          class="dropdown-item"
+                          ngbdropdown=""
                           style=""
                         >
                           <div
-                            ngbdropdown=""
-                            placement="right"
+                            class="dropdown-item"
                           >
-                            <span
-                              aria-expanded="false"
-                              class="dropdown-toggle float-end invisible"
-                              ngbdropdownanchor=""
-                            />
-                             Students in this course will give feedback on ... 
-                            <i
-                              class="fas fa-caret-right"
-                            />
-                            <ul
-                              class="dropdown-menu"
-                              ngbdropdownmenu=""
+                            <button
+                              class="dropdown-button"
                             >
-                              <li
-                                class="dropdown-item"
-                              >
-                                Nobody specific (For general class feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver (Self feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Instructors in the course
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver's team members
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver's team members and Giver
-                              </li>
-                            </ul>
+                               Students in this course will give feedback on ... 
+                              <i
+                                class="fa-caret-right fas"
+                              />
+                            </button>
                           </div>
                         </li>
                         <li
                           class="dropdown-divider"
                         />
                         <li
-                          class="dropdown-item"
+                          class="text-wrap dropdown-item"
                         >
-                          Custom feedback path...
+                          <button
+                            class="dropdown-button"
+                          >
+                             Custom feedback path... 
+                          </button>
                         </li>
                       </ul>
                     </div>
@@ -2186,11 +2116,13 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                     >
                       <button
                         aria-expanded="false"
+                        aria-label="Feedback Path Dropdown"
                         class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                         id="btn-feedback-path"
                         ngbdropdowntoggle=""
                       >
                         <span
+                          class="text-wrap"
                           style=""
                         >
                            Students in this course will give feedback on 
@@ -2211,139 +2143,67 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           Common feedback path combinations
                         </li>
                         <li
-                          class="dropdown-item"
+                          ngbdropdown=""
                           style=""
                         >
                           <div
-                            ngbdropdown=""
-                            placement="right"
+                            class="dropdown-item"
                           >
-                            <span
-                              aria-expanded="false"
-                              class="dropdown-toggle float-end invisible"
-                              ngbdropdownanchor=""
-                            />
-                             Instructors in this course will give feedback on ... 
-                            <i
-                              class="fas fa-caret-right"
-                            />
-                            <ul
-                              class="dropdown-menu"
-                              ngbdropdownmenu=""
+                            <button
+                              class="dropdown-button"
                             >
-                              <li
-                                class="dropdown-item"
-                              >
-                                Nobody specific (For general class feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver (Self feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Instructors in the course
-                              </li>
-                            </ul>
+                               Instructors in this course will give feedback on ... 
+                              <i
+                                class="fa-caret-right fas"
+                              />
+                            </button>
                           </div>
                         </li>
                         <li
-                          class="dropdown-item"
+                          ngbdropdown=""
                           style=""
                         >
                           <div
-                            ngbdropdown=""
-                            placement="right"
+                            class="dropdown-item"
                           >
-                            <span
-                              aria-expanded="false"
-                              class="dropdown-toggle float-end invisible"
-                              ngbdropdownanchor=""
-                            />
-                             Feedback session creator (i.e., me) will give feedback on ... 
-                            <i
-                              class="fas fa-caret-right"
-                            />
-                            <ul
-                              class="dropdown-menu"
-                              ngbdropdownmenu=""
+                            <button
+                              class="dropdown-button"
                             >
-                              <li
-                                class="dropdown-item"
-                              >
-                                Nobody specific (For general class feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver (Self feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Instructors in the course
-                              </li>
-                            </ul>
+                               Feedback session creator (i.e., me) will give feedback on ... 
+                              <i
+                                class="fa-caret-right fas"
+                              />
+                            </button>
                           </div>
                         </li>
                         <li
-                          class="dropdown-item"
+                          ngbdropdown=""
                           style=""
                         >
                           <div
-                            ngbdropdown=""
-                            placement="right"
+                            class="dropdown-item"
                           >
-                            <span
-                              aria-expanded="false"
-                              class="dropdown-toggle float-end invisible"
-                              ngbdropdownanchor=""
-                            />
-                             Students in this course will give feedback on ... 
-                            <i
-                              class="fas fa-caret-right"
-                            />
-                            <ul
-                              class="dropdown-menu"
-                              ngbdropdownmenu=""
+                            <button
+                              class="dropdown-button"
                             >
-                              <li
-                                class="dropdown-item"
-                              >
-                                Nobody specific (For general class feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver (Self feedback)
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Instructors in the course
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver's team members
-                              </li>
-                              <li
-                                class="dropdown-item"
-                              >
-                                Giver's team members and Giver
-                              </li>
-                            </ul>
+                               Students in this course will give feedback on ... 
+                              <i
+                                class="fa-caret-right fas"
+                              />
+                            </button>
                           </div>
                         </li>
                         <li
                           class="dropdown-divider"
                         />
                         <li
-                          class="dropdown-item"
+                          class="text-wrap dropdown-item"
                         >
-                          Custom feedback path...
+                          <button
+                            class="dropdown-button"
+                          >
+                             Custom feedback path... 
+                          </button>
                         </li>
                       </ul>
                     </div>
@@ -4009,6 +3869,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                 >
                   <button
                     aria-expanded="false"
+                    aria-label="Feedback Path Dropdown"
                     class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                     id="btn-feedback-path"
                     ngbdropdowntoggle=""
@@ -4030,139 +3891,67 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                       Common feedback path combinations
                     </li>
                     <li
-                      class="dropdown-item"
+                      ngbdropdown=""
                       style=""
                     >
                       <div
-                        ngbdropdown=""
-                        placement="right"
+                        class="dropdown-item"
                       >
-                        <span
-                          aria-expanded="false"
-                          class="dropdown-toggle float-end invisible"
-                          ngbdropdownanchor=""
-                        />
-                         Instructors in this course will give feedback on ... 
-                        <i
-                          class="fas fa-caret-right"
-                        />
-                        <ul
-                          class="dropdown-menu"
-                          ngbdropdownmenu=""
+                        <button
+                          class="dropdown-button"
                         >
-                          <li
-                            class="dropdown-item"
-                          >
-                            Nobody specific (For general class feedback)
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Giver (Self feedback)
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Instructors in the course
-                          </li>
-                        </ul>
+                           Instructors in this course will give feedback on ... 
+                          <i
+                            class="fa-caret-right fas"
+                          />
+                        </button>
                       </div>
                     </li>
                     <li
-                      class="dropdown-item"
+                      ngbdropdown=""
                       style=""
                     >
                       <div
-                        ngbdropdown=""
-                        placement="right"
+                        class="dropdown-item"
                       >
-                        <span
-                          aria-expanded="false"
-                          class="dropdown-toggle float-end invisible"
-                          ngbdropdownanchor=""
-                        />
-                         Feedback session creator (i.e., me) will give feedback on ... 
-                        <i
-                          class="fas fa-caret-right"
-                        />
-                        <ul
-                          class="dropdown-menu"
-                          ngbdropdownmenu=""
+                        <button
+                          class="dropdown-button"
                         >
-                          <li
-                            class="dropdown-item"
-                          >
-                            Nobody specific (For general class feedback)
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Giver (Self feedback)
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Instructors in the course
-                          </li>
-                        </ul>
+                           Feedback session creator (i.e., me) will give feedback on ... 
+                          <i
+                            class="fa-caret-right fas"
+                          />
+                        </button>
                       </div>
                     </li>
                     <li
-                      class="dropdown-item"
+                      ngbdropdown=""
                       style=""
                     >
                       <div
-                        ngbdropdown=""
-                        placement="right"
+                        class="dropdown-item"
                       >
-                        <span
-                          aria-expanded="false"
-                          class="dropdown-toggle float-end invisible"
-                          ngbdropdownanchor=""
-                        />
-                         Students in this course will give feedback on ... 
-                        <i
-                          class="fas fa-caret-right"
-                        />
-                        <ul
-                          class="dropdown-menu"
-                          ngbdropdownmenu=""
+                        <button
+                          class="dropdown-button"
                         >
-                          <li
-                            class="dropdown-item"
-                          >
-                            Nobody specific (For general class feedback)
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Giver (Self feedback)
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Instructors in the course
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Giver's team members
-                          </li>
-                          <li
-                            class="dropdown-item"
-                          >
-                            Giver's team members and Giver
-                          </li>
-                        </ul>
+                           Students in this course will give feedback on ... 
+                          <i
+                            class="fa-caret-right fas"
+                          />
+                        </button>
                       </div>
                     </li>
                     <li
                       class="dropdown-divider"
                     />
                     <li
-                      class="dropdown-item"
+                      class="text-wrap dropdown-item"
                     >
-                      Custom feedback path...
+                      <button
+                        class="dropdown-button"
+                      >
+                         Custom feedback path... 
+                      </button>
                     </li>
                   </ul>
                 </div>

From f91921916f58dd9a31207adf20e894201cb054d4 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 10:26:54 +0800
Subject: [PATCH 06/11] Fix mobile overflow

---
 .../feedback-path-panel.component.html         |  2 +-
 ...or-session-edit-page.component.spec.ts.snap | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index baeb9a699ae..9fa74b2a0ca 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -13,7 +13,7 @@
     <ul id="feedback-path-dropdown" ngbDropdownMenu>
       <li class="dropdown-header">Common feedback path combinations</li>
       <li *ngFor="let path of commonFeedbackPaths | keyvalue" ngbDropdown #subMenu="ngbDropdown">
-        <div class="dropdown-item">
+        <div class="text-wrap dropdown-item">
           <button class="dropdown-button" (click)="toggleSubMenu(path.key)">
             {{ path.key | giverTypeDescription }} will give feedback on ... <i class="fas fa-caret-{{ isSubMenuOpen(path.key) ? 'down' : 'right' }}"></i>
           </button>
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 6964dacbab6..6766afa8f70 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1478,7 +1478,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           style=""
                         >
                           <div
-                            class="dropdown-item"
+                            class="text-wrap dropdown-item"
                           >
                             <button
                               class="dropdown-button"
@@ -1495,7 +1495,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           style=""
                         >
                           <div
-                            class="dropdown-item"
+                            class="text-wrap dropdown-item"
                           >
                             <button
                               class="dropdown-button"
@@ -1512,7 +1512,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           style=""
                         >
                           <div
-                            class="dropdown-item"
+                            class="text-wrap dropdown-item"
                           >
                             <button
                               class="dropdown-button"
@@ -2147,7 +2147,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           style=""
                         >
                           <div
-                            class="dropdown-item"
+                            class="text-wrap dropdown-item"
                           >
                             <button
                               class="dropdown-button"
@@ -2164,7 +2164,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           style=""
                         >
                           <div
-                            class="dropdown-item"
+                            class="text-wrap dropdown-item"
                           >
                             <button
                               class="dropdown-button"
@@ -2181,7 +2181,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           style=""
                         >
                           <div
-                            class="dropdown-item"
+                            class="text-wrap dropdown-item"
                           >
                             <button
                               class="dropdown-button"
@@ -3895,7 +3895,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                       style=""
                     >
                       <div
-                        class="dropdown-item"
+                        class="text-wrap dropdown-item"
                       >
                         <button
                           class="dropdown-button"
@@ -3912,7 +3912,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                       style=""
                     >
                       <div
-                        class="dropdown-item"
+                        class="text-wrap dropdown-item"
                       >
                         <button
                           class="dropdown-button"
@@ -3929,7 +3929,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                       style=""
                     >
                       <div
-                        class="dropdown-item"
+                        class="text-wrap dropdown-item"
                       >
                         <button
                           class="dropdown-button"

From 59d451352cf4571c0d35421d21e68f2eb8ce672d Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 12:11:45 +0800
Subject: [PATCH 07/11] Fix lint issues

---
 .../feedback-path-panel/feedback-path-panel.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index 9fa74b2a0ca..2bbf51fd18e 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -3,7 +3,7 @@
     <b class="feedback-path-title">Feedback Path</b> (Who is giving feedback about whom?)
   </div>
   <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px w-100" autoClose="outside">
-    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle 
+    <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle
             [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()" aria-label="Feedback Path Dropdown">
       <span *ngIf="!model.isUsingOtherFeedbackPath" class="text-wrap">
         {{ model.giverType | giverTypeDescription }} will give feedback on <i class="fas fa-arrow-right"></i> {{ model.recipientType | recipientTypeDescription }}

From ba69e58222b4d96ec50c2d5bfefbc18f391c4e36 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 18:50:14 +0800
Subject: [PATCH 08/11] Remove aria-label and update tests

---
 .../feedback-path-panel/feedback-path-panel.component.html     | 2 +-
 .../__snapshots__/question-edit-form.component.spec.ts.snap    | 1 -
 .../instructor-session-edit-page.component.spec.ts.snap        | 3 ---
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index 2bbf51fd18e..711bf985e64 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -4,7 +4,7 @@
   </div>
   <div ngbDropdown #mainMenu="ngbDropdown" class="margin-top-15px w-100" autoClose="outside">
     <button id="btn-feedback-path" class="btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block" ngbDropdownToggle
-            [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()" aria-label="Feedback Path Dropdown">
+            [disabled]="!model.isEditable || commonFeedbackPaths.size === 1" (click)="resetMenu()">
       <span *ngIf="!model.isUsingOtherFeedbackPath" class="text-wrap">
         {{ model.giverType | giverTypeDescription }} will give feedback on <i class="fas fa-arrow-right"></i> {{ model.recipientType | recipientTypeDescription }}
       </span>
diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index 8faef19178d..dd802b41df3 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -239,7 +239,6 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
             >
               <button
                 aria-expanded="false"
-                aria-label="Feedback Path Dropdown"
                 class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                 disabled=""
                 id="btn-feedback-path"
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 6766afa8f70..5d492f15c56 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1447,7 +1447,6 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                     >
                       <button
                         aria-expanded="false"
-                        aria-label="Feedback Path Dropdown"
                         class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                         id="btn-feedback-path"
                         ngbdropdowntoggle=""
@@ -2116,7 +2115,6 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                     >
                       <button
                         aria-expanded="false"
-                        aria-label="Feedback Path Dropdown"
                         class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                         id="btn-feedback-path"
                         ngbdropdowntoggle=""
@@ -3869,7 +3867,6 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                 >
                   <button
                     aria-expanded="false"
-                    aria-label="Feedback Path Dropdown"
                     class="dropdown-toggle btn btn-light white-space-normal mw-100 overflow-scroll d-inline-block"
                     id="btn-feedback-path"
                     ngbdropdowntoggle=""

From cc364e95727e622bf329adad0ca6f64ec4d8ab54 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 22:31:19 +0800
Subject: [PATCH 09/11] Fix attempt for E2E tests

---
 .../teammates/e2e/pageobjects/InstructorFeedbackEditPage.java | 2 +-
 .../feedback-path-panel/feedback-path-panel.component.html    | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
index 2888d3d500d..53d00fec6d4 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
@@ -1081,7 +1081,7 @@ private void selectFeedbackPathDropdownOption(int questionNum, String text) {
         WebElement dropdown = feedbackPathPanel.findElement(By.id("feedback-path-dropdown"));
         List<WebElement> options = dropdown.findElements(By.className("dropdown-item"));
         for (WebElement option : options) {
-            if (option.getText().equals(text)) {
+            if (option.findElement(By.className("dropdown-button")).getText().equals(text)) {
                 click(option);
                 return;
             }
diff --git a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
index 711bf985e64..f229bb479f3 100644
--- a/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
+++ b/src/web/app/components/feedback-path-panel/feedback-path-panel.component.html
@@ -28,9 +28,7 @@
       </li>
       <li class="dropdown-divider"></li>
       <li class="text-wrap dropdown-item">
-        <button class="dropdown-button" (click)="triggerCustomFeedbackPath(); mainMenu.close()">
-          Custom feedback path...
-        </button>
+        <button class="dropdown-button" (click)="triggerCustomFeedbackPath(); mainMenu.close()">Custom feedback path...</button>
       </li>
     </ul>
   </div>

From f75e55ac258a5ae7f8faba4e39a0e522e3c09562 Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 23:10:45 +0800
Subject: [PATCH 10/11] Update tests

---
 .../e2e/pageobjects/InstructorFeedbackEditPage.java         | 5 +++--
 .../__snapshots__/question-edit-form.component.spec.ts.snap | 2 +-
 .../instructor-session-edit-page.component.spec.ts.snap     | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
index 53d00fec6d4..0e78ac9cadd 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
@@ -1081,8 +1081,9 @@ private void selectFeedbackPathDropdownOption(int questionNum, String text) {
         WebElement dropdown = feedbackPathPanel.findElement(By.id("feedback-path-dropdown"));
         List<WebElement> options = dropdown.findElements(By.className("dropdown-item"));
         for (WebElement option : options) {
-            if (option.findElement(By.className("dropdown-button")).getText().equals(text)) {
-                click(option);
+            WebElement dropdownButton = option.findElement(By.className("dropdown-button"));
+            if (dropdownButton.getText().equals(text)) {
+                click(dropdownButton);
                 return;
             }
         }
diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index dd802b41df3..ad29ba49d16 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -274,7 +274,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
                   <button
                     class="dropdown-button"
                   >
-                     Custom feedback path... 
+                    Custom feedback path...
                   </button>
                 </li>
               </ul>
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 5d492f15c56..f654d00bc32 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1532,7 +1532,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           <button
                             class="dropdown-button"
                           >
-                             Custom feedback path... 
+                            Custom feedback path...
                           </button>
                         </li>
                       </ul>
@@ -2200,7 +2200,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                           <button
                             class="dropdown-button"
                           >
-                             Custom feedback path... 
+                            Custom feedback path...
                           </button>
                         </li>
                       </ul>
@@ -3947,7 +3947,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
                       <button
                         class="dropdown-button"
                       >
-                         Custom feedback path... 
+                        Custom feedback path...
                       </button>
                     </li>
                   </ul>

From a783ac8305e0a97edd4b53ad6a63b170cbbdd58a Mon Sep 17 00:00:00 2001
From: Neo Wei Qing <ztolenstar@hotmail.com>
Date: Wed, 15 Mar 2023 23:26:56 +0800
Subject: [PATCH 11/11] Refine E2E change

---
 .../e2e/pageobjects/InstructorFeedbackEditPage.java        | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
index 0e78ac9cadd..71e81e869c6 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
@@ -1079,11 +1079,10 @@ private void selectFeedbackPathDropdownOption(int questionNum, String text) {
         WebElement feedbackPathPanel = questionForm.findElement(By.tagName("tm-feedback-path-panel"));
         click(feedbackPathPanel.findElement(By.id("btn-feedback-path")));
         WebElement dropdown = feedbackPathPanel.findElement(By.id("feedback-path-dropdown"));
-        List<WebElement> options = dropdown.findElements(By.className("dropdown-item"));
+        List<WebElement> options = dropdown.findElements(By.className("dropdown-button"));
         for (WebElement option : options) {
-            WebElement dropdownButton = option.findElement(By.className("dropdown-button"));
-            if (dropdownButton.getText().equals(text)) {
-                click(dropdownButton);
+            if (option.getText().equals(text)) {
+                click(option);
                 return;
             }
         }