diff --git a/src/components/flipper.ts b/src/components/flipper.ts index b770a8716..53960cf49 100644 --- a/src/components/flipper.ts +++ b/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; } /** diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 91ded10dd..799b60fd5 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/src/components/modules/toolbar/inline.ts @@ -698,7 +698,10 @@ export default class InlineToolbar extends Module { private enableFlipper(): void { this.flipper = new Flipper({ focusedItemClass: this.CSS.focusedButton, - allowArrows: false, + allowedKeys: [ + _.keyCodes.ENTER, + _.keyCodes.TAB, + ], }); } } diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts index 6c6537066..aa3168470 100644 --- a/src/components/utils/popover.ts +++ b/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 { this.flipper = new Flipper({ items: tools, focusedItemClass: Popover.CSS.itemFocused, + allowedKeys: [ + keyCodes.TAB, + keyCodes.UP, + keyCodes.DOWN, + keyCodes.ENTER, + ], }); } } diff --git a/src/styles/popover.css b/src/styles/popover.css index 2516291f6..27c52598e 100644 --- a/src/styles/popover.css +++ b/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) {