fix(#2036): scrolling issue with block hovering (#2042)

* fix scrolling issue caused by the popover.hide()

* Update popover.ts

* Update CHANGELOG.md

* upd codeowners

* naming of isShown improved
This commit is contained in:
Peter Savchenko 2022-05-01 15:09:16 +03:00 committed by GitHub
parent 8ae8823dcd
commit 6a15cc55c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 2 deletions

View file

@ -1 +1,2 @@
* @neSpecc @gohabereg @khaydarov * @neSpecc @gohabereg @TatianaFomina @ilyamore88

View file

@ -4,7 +4,9 @@
- `Fix` — Scrolling issue when opening toolbox on mobile fixed - `Fix` — Scrolling issue when opening toolbox on mobile fixed
- `Fix` — Typo in toolbox empty placeholder 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`*Dev Example Page* - Add popup example page
- `Improvement`*UI* - The Toolbox will restore the internal scroll on every opening
### 2.24.1 ### 2.24.1

View file

@ -58,6 +58,11 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
*/ */
private readonly items: PopoverItem[]; private readonly items: PopoverItem[];
/**
* Stores the visibility state.
*/
private isShown = false;
/** /**
* Created nodes * Created nodes
*/ */
@ -190,6 +195,12 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
* Shows the Popover * Shows the Popover
*/ */
public show(): void { 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.popover.classList.add(Popover.CSS.popoverOpened);
this.nodes.overlay.classList.remove(Popover.CSS.popoverOverlayHidden); this.nodes.overlay.classList.remove(Popover.CSS.popoverOverlayHidden);
this.flipper.activate(); this.flipper.activate();
@ -203,13 +214,22 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
if (isMobileScreen()) { if (isMobileScreen()) {
this.scrollLocker.lock(); this.scrollLocker.lock();
} }
this.isShown = true;
} }
/** /**
* Hides the Popover * Hides the Popover
*/ */
public hide(): void { 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.popover.classList.remove(Popover.CSS.popoverOpened);
this.nodes.overlay.classList.add(Popover.CSS.popoverOverlayHidden); this.nodes.overlay.classList.add(Popover.CSS.popoverOverlayHidden);
this.flipper.deactivate(); this.flipper.deactivate();
@ -217,6 +237,8 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
if (isMobileScreen()) { if (isMobileScreen()) {
this.scrollLocker.unlock(); this.scrollLocker.unlock();
} }
this.isShown = false;
} }
/** /**