HTML class "with-overlay" does not clear on menu select #850

alec-francis · 2019-05-02T11:18:03Z

Bug Report

The "with-overlay" class added to the HTML tag does not clear upon menu selection for mobile devices.

This class prevents scrolling due to the overflow hidden style that it applies.

This bug has occurred in the past a couple times and seems to be back:
#476
#293

A clear and concise description of what the bug is.

To Reproduce

I have reproduced this issue in three different Gatsby environments. The easiest way to reproduce is:

Navigate to the button page of the Gatsby starter located at:
https://gatsby-docz.netlify.com/docs/docs-button
Open up dev tools and change the viewing size to a mobile device.
Open up the mobile menu. You will notice the "with-overlay" class is applied to the html tag. The HTML tag will look as per below:

<html lang="en" data-react-helmet="lang" class="with-overlay">

Click on the "Getting Started" page. You will notice that the "with-overlay" class remains.

Environment

Windows 10 Pro Version 1803
gatsby --version
2.5.12
npm --version
6.4.1
node --version
v10.15.3

As well as testing on the starter I had originally seen this issue in my own project with the packages below:

{
  "name": "ultra-config-website-react",
  "description": "Ultra Config Website - Front End",
  "version": "1.0.0",
  "private": true,
  "author": "Alex Buda",
  "dependencies": {
    "@hot-loader/react-dom": "^16.8.6",
    "appversion": "^1.7.1",
    "brace": "^0.11.1",
    "docz": "^1.1.0",
    "docz-theme-default": "^1.1.0",
    "express": "^4.16.4",
    "gatsby": "^2.3.35",
    "gatsby-background-image": "^0.3.6",
    "gatsby-image": "^2.0.41",
    "gatsby-link": "^2.0.17",
    "gatsby-plugin-google-analytics": "^2.0.19",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-robots-txt": "^1.4.0",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.0.35",
    "gatsby-plugin-sitemap": "^2.0.12",
    "gatsby-remark-images": "^3.0.11",
    "gatsby-remark-prismjs": "^3.2.8",
    "gatsby-source-filesystem": "^2.0.33",
    "gatsby-theme-docz": "^1.1.0",
    "gatsby-transformer-remark": "^2.3.12",
    "gatsby-transformer-sharp": "^2.1.18",
    "js-file-download": "^0.4.5",
    "lodash.clonedeep": "^4.5.0",
    "node-sass": "^4.12.0",
    "prismjs": "^1.16.0",
    "pug": "^2.0.3",
    "rc-menu": "^7.4.22",
    "react": "^16.8.6",
    "react-ace": "^6.5.0",
    "react-collapse": "^4.0.3",
    "react-dropzone": "^8.2.0",
    "react-helmet": "^5.2.1",
    "react-hot-loader": "^4.8.4",
    "react-icons": "^3.6.1",
    "react-loading": "^2.0.3",
    "react-modal": "^3.8.1",
    "react-motion": "^0.5.2",
    "react-responsive": "^6.1.2",
    "react-select": "^2.4.3",
    "react-smooth-collapse": "^2.0.1",
    "react-sortable-tree-theme-file-explorer": "^2.0.0",
    "react-square-hosted-fields": "^1.2.4",
    "react-table": "^6.10.0",
    "react-textarea-autosize": "^7.1.0",
    "react-toastify": "^5.1.0",
    "react-tooltip": "^3.10.0",
    "react-transition-group": "^2.9.0",
    "reaptcha": "^1.4.2",
    "rename-keys": "^2.0.1",
    "webpack": "^4.30.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.17.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

Feel free to let me know if you would like any further information.

Thanks

The text was updated successfully, but these errors were encountered:

alec-francis · 2019-05-12T10:16:42Z

Update. This bug is still present in the newest release of docz-theme-default.

I managed to fix it locally by modifying the following file:

https://github.com/pedronauck/docz/blob/master/core/docz-theme-default/src/components/shared/Sidebar/index.tsx

Inside the SideBar object definition I added a conditional statement to clear the overlay:

export const Sidebar: SFC = () => {
...
if(hidden) document.documentElement.classList.remove('with-overlay');

This is working but I'm not sure if there is a cleaner approach?

Cheers,

Alex

closes issue doczjs#850

alec-francis added a commit to alec-francis/docz that referenced this issue May 17, 2019

fix: ensures the overlay is hidden when the sidebar is collapsed

9a8fe39

closes issue doczjs#850

This was referenced May 17, 2019

fix(docz-theme-default): ensures the overlay is hidden when the sidebar is collapsed #880

Closed

v1 scrolling on mobile seems to be broken #870

Closed

kwridan mentioned this issue May 25, 2019

Improve documentation with React components tuist/tuist#365

Merged

rakannimer closed this as completed Sep 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML class "with-overlay" does not clear on menu select #850

HTML class "with-overlay" does not clear on menu select #850

alec-francis commented May 2, 2019

alec-francis commented May 12, 2019

HTML class "with-overlay" does not clear on menu select #850

HTML class "with-overlay" does not clear on menu select #850

Comments

alec-francis commented May 2, 2019

Bug Report

alec-francis commented May 12, 2019