MM 17278 - Stop posts lists from scrolling when the emoji picker is o…

…pen (mattermost#3860)

* prevent scrolling while emoji picker is open

- easier of potential approaches

* stop RHS posts from scrolling

* update to prevent tests from failing

* this time using `remove`

components/emoji_picker/emoji_picker.jsx

@@ -243,6 +243,11 @@ export default class EmojiPicker extends React.PureComponent {
  if (this.emojiPickerContainer) {
  this.divHeight = this.emojiPickerContainer.offsetHeight;
  }
+
+ const rootComponent = document.getElementById('root');
+ if (rootComponent) {
+ rootComponent.classList.add('emoji-picker--active');
+ }
  }
 
  updateEmojisToShow(divTopOffset) {
@@ -266,6 +271,11 @@ export default class EmojiPicker extends React.PureComponent {
  if (this.renderAllCategoriesFrame) {
  window.cancelAnimationFrame(this.renderAllCategoriesFrame);
  }
+
+ const rootComponent = document.getElementById('root');
+ if (rootComponent) {
+ rootComponent.classList.remove('emoji-picker--active');
+ }
  }
 
  renderAllCategories = () => {

sass/layout/_post.scss

@@ -2105,4 +2105,8 @@
  margin-bottom: 1em;
  margin-top: -1em;
  }
+
+ .emoji-picker--active & {
+ pointer-events: none;
+ }
 }

sass/layout/_sidebar-right.scss

@@ -172,6 +172,12 @@
  .info-card {
  padding: 5px 15px 60px 15px;
  }
+
+ .scrollbar--view {
+ .emoji-picker--active & {
+ pointer-events: none;
+ }
+ }
  }
 
  .sidebar__overlay {