Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: highlight code scroll console error (#7497) #7519

Conversation

kristina-kovacikova
Copy link
Contributor

Description

  • fix for "Unable to preventDefault inside passive event listener due to target being treated as passive"
    • commonly advised solution => setting CSS property touch-action: none did not fix the issue
    • as a workaround for the error manual event listener for scroll has been added to componentDidMount to be able to set option {passive:false}

Motivation and Context

Fixes #7497

How Has This Been Tested?

  • go to swagger-ui and run npm run dev wait a while and open localhost:3200
    • expand PUT /pets endpoint
    • click inspect on the example body
    • in dev tools - elements search for code element within div with class "highlight-code"
      • edit code element as HTML and duplicate it => as a result the example body will be longer and scrollable
      • now that the example body is scrollable open console in devtools and scroll example body all the way till the whole page starts scrolling => there should be no errors in the console

Screenshots (if appropriate):

image

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

@char0n char0n self-requested a review September 22, 2021 10:49
@char0n char0n self-assigned this Sep 22, 2021
@char0n
Copy link
Member

char0n commented Sep 22, 2021

@kristina-kovacikova thank you for the PR.

Can you please remove modified package-lock.json file from this PR? I assume the change was accidental.

src/core/components/highlight-code.jsx Outdated Show resolved Hide resolved
src/core/components/highlight-code.jsx Outdated Show resolved Hide resolved
kristina-kovacikova and others added 3 commits October 5, 2021 07:24
shorten the code

Co-authored-by: Mahtis Michel <mathis.michel@outlook.de>
shorten the code

Co-authored-by: Mahtis Michel <mathis.michel@outlook.de>
@kristina-kovacikova
Copy link
Contributor Author

@mathis-m tested and committed your suggestions, thanks

Copy link
Member

@char0n char0n left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! Thank you for contributing.

@char0n
Copy link
Member

char0n commented Oct 5, 2021

please build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants