Vertical toolbox fixes (#2017)

* Replace visibility property with display for hiding popover

* Disable arrow right and left keys for popover

* Revert "Replace visibility property with display for hiding popover"

This reverts commit af521cf.

* Hide popover via setting max-height to 0 to fix animation in safari

* Remove redundant condition

Author: TatianaFomina

src/components/flipper.ts

@@ -18,20 +18,22 @@ export interface FlipperOptions {
   items?: HTMLElement[];
 
   /**
-   * Defines arrows usage. By default Flipper leafs items also via RIGHT/LEFT.
-   *
-   * true by default
-   *
-   * Pass 'false' if you don't need this behaviour
-   * (for example, Inline Toolbar should be closed by arrows,
-   * because it means caret moving with selection clearing)
+   * Optional callback for button click
    */
-  allowArrows?: boolean;
+  activateCallback?: (item: HTMLElement) => void;
 
   /**
-   * Optional callback for button click
+   * List of keys allowed for handling.
+   * Can include codes of the following keys:
+   *  - Tab
+   *  - Enter
+   *  - Arrow up
+   *  - Arrow down
+   *  - Arrow right
+   *  - Arrow left
+   * If not specified all keys are enabled
    */
-  activateCallback?: (item: HTMLElement) => void;
+  allowedKeys?: number[];
 }
 
 /**
@@ -53,11 +55,9 @@ export default class Flipper {
   private activated = false;
 
   /**
-   * Flag that allows arrows usage to flip items
-   *
-   * @type {boolean}
+   * List codes of the keys allowed for handling
    */
-  private readonly allowArrows: boolean = true;
+  private readonly allowedKeys: number[];
 
   /**
    * Call back for button click/enter
@@ -68,9 +68,9 @@ export default class Flipper {
    * @param {FlipperOptions} options - different constructing settings
    */
   constructor(options: FlipperOptions) {
-    this.allowArrows = _.isBoolean(options.allowArrows) ? options.allowArrows : true;
     this.iterator = new DomIterator(options.items, options.focusedItemClass);
     this.activateCallback = options.activateCallback;
+    this.allowedKeys = options.allowedKeys || Flipper.usedKeys;
   }
 
   /**
@@ -206,23 +206,7 @@ export default class Flipper {
    * @returns {boolean}
    */
   private isEventReadyForHandling(event: KeyboardEvent): boolean {
-    const handlingKeyCodeList = [
-      _.keyCodes.TAB,
-      _.keyCodes.ENTER,
-    ];
-
-    const isCurrentItemIsFocusedInput = this.iterator.currentItem == document.activeElement;
-
-    if (this.allowArrows && !isCurrentItemIsFocusedInput) {
-      handlingKeyCodeList.push(
-        _.keyCodes.LEFT,
-        _.keyCodes.RIGHT,
-        _.keyCodes.UP,
-        _.keyCodes.DOWN
-      );
-    }
-
-    return this.activated && handlingKeyCodeList.indexOf(event.keyCode) !== -1;
+    return this.activated && this.allowedKeys.indexOf(event.keyCode) !== -1;
   }
 
   /**

src/components/modules/toolbar/inline.ts

@@ -698,7 +698,10 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
   private enableFlipper(): void {
     this.flipper = new Flipper({
       focusedItemClass: this.CSS.focusedButton,
-      allowArrows: false,
+      allowedKeys: [
+        _.keyCodes.ENTER,
+        _.keyCodes.TAB,
+      ],
     });
   }
 }

src/components/utils/popover.ts

@@ -3,7 +3,7 @@ import Listeners from './listeners';
 import Flipper from '../flipper';
 import SearchInput from './search-input';
 import EventsDispatcher from './events';
-import { isMobile } from '../utils';
+import { isMobile, keyCodes } from '../utils';
 
 /**
  * Describe parameters for rendering the single item of Popover
@@ -347,6 +347,12 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     this.flipper = new Flipper({
       items: tools,
       focusedItemClass: Popover.CSS.itemFocused,
+      allowedKeys: [
+        keyCodes.TAB,
+        keyCodes.UP,
+        keyCodes.DOWN,
+        keyCodes.ENTER,
+      ],
     });
   }
 }

src/styles/popover.css

@@ -1,16 +1,15 @@
 .ce-popover {
   position: absolute;
   opacity: 0;
-  visibility: hidden;
   will-change: opacity, transform;
   display: flex;
   flex-direction: column;
   padding: 4px;
   min-width: 200px;
-  max-height: 284px;
   overflow: hidden;
   box-sizing: border-box;
   flex-shrink: 0;
+  max-height: 0;
 
   @apply --overlay-pane;
 
@@ -19,7 +18,7 @@
 
   &--opened {
      opacity: 1;
-     visibility: visible;
+     max-height: 284px;
      animation: panelShowing 100ms ease;
 
      @media (--mobile) {