Skip to content

Commit

Permalink
fix(#2036): scrolling issue with block hovering (#2042)
Browse files Browse the repository at this point in the history
* fix scrolling issue caused by the popover.hide()

* Update popover.ts

* Update CHANGELOG.md

* upd codeowners

* naming of isShown improved
  • Loading branch information
neSpecc authored May 1, 2022
1 parent 8ae8823 commit 6a15cc5
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 2 deletions.
3 changes: 2 additions & 1 deletion CODEOWNERS
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
* @neSpecc @gohabereg @khaydarov
* @neSpecc @gohabereg @TatianaFomina @ilyamore88

2 changes: 2 additions & 0 deletions docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@

- `Fix` — Scrolling issue when opening toolbox on mobile fixed
- `Fix` — Typo in toolbox empty placeholder fixed
- `Fix` — The issue with scroll jumping on block hovering have fixed [2036](https://github.com/codex-team/editor.js/issues/2036)
- `Improvement`*Dev Example Page* - Add popup example page
- `Improvement`*UI* - The Toolbox will restore the internal scroll on every opening

### 2.24.1

Expand Down
24 changes: 23 additions & 1 deletion src/components/utils/popover.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
*/
private readonly items: PopoverItem[];

/**
* Stores the visibility state.
*/
private isShown = false;

/**
* Created nodes
*/
Expand Down Expand Up @@ -190,6 +195,12 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
* Shows the Popover
*/
public show(): void {
/**
* Clear search and items scrolling
*/
this.search.clear();
this.nodes.items.scrollTop = 0;

this.nodes.popover.classList.add(Popover.CSS.popoverOpened);
this.nodes.overlay.classList.remove(Popover.CSS.popoverOverlayHidden);
this.flipper.activate();
Expand All @@ -203,20 +214,31 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
if (isMobileScreen()) {
this.scrollLocker.lock();
}

this.isShown = true;
}

/**
* Hides the Popover
*/
public hide(): void {
this.search.clear();
/**
* If it's already hidden, do nothing
* to prevent extra DOM operations
*/
if (!this.isShown) {
return;
}

this.nodes.popover.classList.remove(Popover.CSS.popoverOpened);
this.nodes.overlay.classList.add(Popover.CSS.popoverOverlayHidden);
this.flipper.deactivate();

if (isMobileScreen()) {
this.scrollLocker.unlock();
}

this.isShown = false;
}

/**
Expand Down

0 comments on commit 6a15cc5

Please sign in to comment.