From 292f7fafcb77890c46f8047335984abff81fcb34 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Wed, 3 Aug 2022 14:04:43 +0300
Subject: [PATCH] Fix flipper for confirmation element

---
 src/components/utils/popover.ts | 12 ++++++++++++
 src/styles/popover.css          |  4 ++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts
index d5e95d87..0f49ed58 100644
--- a/src/components/utils/popover.ts
+++ b/src/components/utils/popover.ts
@@ -529,6 +529,12 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
 
         confirmationStateItemEl.classList.add(Popover.CSS.itemConfirmation);
         itemEl.parentElement.replaceChild(confirmationStateItemEl, itemEl);
+
+        /**
+         * Reactivate flipper to make navigation work with new element
+         */
+        this.flipper.deactivate();
+        this.flipper.activate(this.flippableElements);
       } else {
         /**
          * Otherwise just add confirmation highlighting
@@ -559,6 +565,12 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     confirmationStateItemEl.parentElement.replaceChild(defaultStateItemEl, confirmationStateItemEl);
     defaultStateItemEl.classList.remove(Popover.CSS.itemConfirmation);
     this.itemAwaitngConfirmation = null;
+
+    /**
+     * Reactivate flipper to make navigation work with new element
+     */
+    this.flipper.deactivate();
+    this.flipper.activate(this.flippableElements);
   }
 
   /**
diff --git a/src/styles/popover.css b/src/styles/popover.css
index 076e7617..deecbdd9 100644
--- a/src/styles/popover.css
+++ b/src/styles/popover.css
@@ -85,6 +85,10 @@
         }
       }
 
+      &.ce-popover__item--focused {
+        background: #ce4343 !important;
+      }
+
       .ce-popover__item-icon {
         color: var(--color-confirm);
       }