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 { 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 { 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); }