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 onMouseEnter is fired on disabled buttons #17675

Merged
merged 1 commit into from
Feb 4, 2020

Conversation

AlfredoGJ
Copy link
Contributor

@AlfredoGJ AlfredoGJ commented Dec 20, 2019

This pull request fixes issue #17229. I modified shouldPreventMouseEvent function to include onMouseEnter and added a new test to ReactBrowserEventEmmiter-test.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 20, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 64336e9:

Sandbox Source
twilight-sound-902nk Configuration

@sizebot
Copy link

sizebot commented Dec 20, 2019

Warnings
⚠️ Base commit is broken: 1b9328c

Size changes (experimental)

Generated by 🚫 dangerJS against 64336e9

@sizebot
Copy link

sizebot commented Dec 20, 2019

Warnings
⚠️ Base commit is broken: 1b9328c

Size changes (stable)

Generated by 🚫 dangerJS against 64336e9

@AlfredoGJ AlfredoGJ reopened this Dec 20, 2019
@benbot
Copy link

benbot commented Dec 29, 2019

should onMouseExit be on that switch statement as well?

@AlfredoGJ
Copy link
Contributor Author

@benbot Unlike onMouseEnter, onMouseExit performs well and has not the same bug. onMouseExit event is not even generated for a disabled button. I'm thinking that maybe none of these event names should be in that switch statement and the bug is in the event registration phase.

I 'll be doing deeper research these days. Meanwhile, this could a useful workaround for someone.

Copy link

@StefanNieuwenhuis StefanNieuwenhuis left a comment

Choose a reason for hiding this comment

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

👍

Copy link
Contributor

@trueadm trueadm left a comment

Choose a reason for hiding this comment

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

This seems okay to me. Ideally we should remove all the custom disabled logic and come up with a better solution in the future for the event system, but for now this should fix this issues at hand.

@trueadm trueadm merged commit 812277d into facebook:master Feb 4, 2020
@mohsinulhaq
Copy link

This fixes #4251 as well, right?

@SebVory
Copy link

SebVory commented Feb 27, 2020

What if you want to display tooltip / help text why user cannot perform action connected with disabled button when user hovers the button? (my real world case). The fix should be to make onMouseExit enabled and have both enabled and not disable the onMouseEnter. If you know nice way (not hack like fake-disable button) how to solve my example case without onMouseEnter onMouseEnter I am free to discuss. But otherwise it should be both enabled in my opinion.

disabled button should just not perform event (on click) but the users still should know why they cannot perform the events (on hover)

@gaearon
Copy link
Collaborator

gaearon commented Feb 27, 2020

Can you please file a new issue to discuss?

newkdr added a commit to newkdr/vscode-gitlens that referenced this pull request Dec 12, 2024
![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<h3>Snyk has created this PR to upgrade react-dom from 16.8.4 to
16.14.0.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **13 versions** ahead of your current
version.

- The recommended version was released on **4 years ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>react-dom</b></summary>
    <ul>
      <li>
<b>16.14.0</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.14.0">2020-10-14</a></br><h3>React</h3>
<ul>
<li>Add support for the <a
href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html"
rel="nofollow">new JSX transform</a>. (<a
href="https://redirect.github.com/lunaruan">@ lunaruan</a> in <a
href="https://redirect.github.com/facebook/react/pull/18299"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18299/hovercard">#18299</a>)</li>
</ul>
      </li>
      <li>
<b>16.13.1</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.13.1">2020-03-19</a></br><h3>React
DOM</h3>
<ul>
<li>Fix bug in legacy mode Suspense where effect clean-up functions are
not fired. This only affects users who use Suspense for data fetching in
legacy mode, which is not technically supported. (<a
href="https://redirect.github.com/acdlite">@ acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/18238"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18238/hovercard">#18238</a>)</li>
<li>Revert warning for cross-component updates that happen inside class
render lifecycles (<code>componentWillReceiveProps</code>,
<code>shouldComponentUpdate</code>, and so on). (<a
href="https://redirect.github.com/gaearon">@ gaearon</a> in <a
href="https://redirect.github.com/facebook/react/pull/18330"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18330/hovercard">#18330</a>)</li>
</ul>
<h2>Artifacts</h2>
<ul>
<li>react: <a href="https://unpkg.com/react@16.13.1/umd/"
rel="nofollow">https://unpkg.com/react@16.13.1/umd/</a></li>
<li>react-art: <a href="https://unpkg.com/react-art@16.13.1/umd/"
rel="nofollow">https://unpkg.com/react-art@16.13.1/umd/</a></li>
<li>react-dom: <a href="https://unpkg.com/react-dom@16.13.1/umd/"
rel="nofollow">https://unpkg.com/react-dom@16.13.1/umd/</a></li>
<li>react-is: <a href="https://unpkg.com/react-is@16.13.1/umd/"
rel="nofollow">https://unpkg.com/react-is@16.13.1/umd/</a></li>
<li>react-test-renderer: <a
href="https://unpkg.com/react-test-renderer@16.13.1/umd/"
rel="nofollow">https://unpkg.com/react-test-renderer@16.13.1/umd/</a></li>
<li>scheduler: <a href="https://unpkg.com/scheduler@0.19.1/umd/"
rel="nofollow">https://unpkg.com/scheduler@0.19.1/umd/</a></li>
</ul>
      </li>
      <li>
<b>16.13.0</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.13.0">2020-02-26</a></br><h3>React</h3>
<ul>
<li>Warn when a string ref is used in a manner that's not amenable to a
future codemod (<a href="https://redirect.github.com/lunaruan">@
lunaruan</a> in <a
href="https://redirect.github.com/facebook/react/pull/17864"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17864/hovercard">#17864</a>)</li>
<li>Deprecate <code>React.createFactory()</code> (<a
href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17878"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17878/hovercard">#17878</a>)</li>
</ul>
<h3>React DOM</h3>
<ul>
<li>Warn when changes in <code>style</code> may cause an unexpected
collision (<a href="https://redirect.github.com/sophiebits">@
sophiebits</a> in <a
href="https://redirect.github.com/facebook/react/pull/14181"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/14181/hovercard">#14181</a>, <a
href="https://redirect.github.com/facebook/react/pull/18002"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18002/hovercard">#18002</a>)</li>
<li>Warn when a function component is updated during another component's
render phase (<a class="user-mention notranslate"
data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/acdlite">@ acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/17099"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17099/hovercard">#17099</a>)</li>
<li>Deprecate <code>unstable_createPortal</code> (<a
href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17880"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17880/hovercard">#17880</a>)</li>
<li>Fix <code>onMouseEnter</code> being fired on disabled buttons (<a
href="https://redirect.github.com/AlfredoGJ">@ AlfredoGJ</a> in <a
href="https://redirect.github.com/facebook/react/pull/17675"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17675/hovercard">#17675</a>)</li>
<li>Call <code>shouldComponentUpdate</code> twice when developing in
<code>StrictMode</code> (<a href="https://redirect.github.com/bvaughn">@
bvaughn</a> in <a
href="https://redirect.github.com/facebook/react/pull/17942"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17942/hovercard">#17942</a>)</li>
<li>Add <code>version</code> property to ReactDOM (<a
href="https://redirect.github.com/ealush">@ ealush</a> in <a
href="https://redirect.github.com/facebook/react/pull/15780"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/15780/hovercard">#15780</a>)</li>
<li>Don't call <code>toString()</code> of
<code>dangerouslySetInnerHTML</code> (<a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17773"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17773/hovercard">#17773</a>)</li>
<li>Show component stacks in more warnings (<a
href="https://redirect.github.com/gaearon">@ gaearon</a> in <a
href="https://redirect.github.com/facebook/react/pull/17922"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17922/hovercard">#17922</a>, <a
href="https://redirect.github.com/facebook/react/pull/17586"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17586/hovercard">#17586</a>)</li>
</ul>
<h3>Concurrent Mode (Experimental)</h3>
<ul>
<li>Warn for problematic usages of <code>ReactDOM.createRoot()</code>
(<a href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17937"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17937/hovercard">#17937</a>)</li>
<li>Remove <code>ReactDOM.createRoot()</code> callback params and added
warnings on usage (<a href="https://redirect.github.com/bvaughn">@
bvaughn</a> in <a
href="https://redirect.github.com/facebook/react/pull/17916"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17916/hovercard">#17916</a>)</li>
<li>Don't group Idle/Offscreen work with other work (<a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17456"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17456/hovercard">#17456</a>)</li>
<li>Adjust <code>SuspenseList</code> CPU bound heuristic (<a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17455"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17455/hovercard">#17455</a>)</li>
<li>Add missing event plugin priorities (<a
href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17914"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17914/hovercard">#17914</a>)</li>
<li>Fix <code>isPending</code> only being true when transitioning from
inside an input event (<a href="https://redirect.github.com/acdlite">@
acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/17382"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17382/hovercard">#17382</a>)</li>
<li>Fix <code>React.memo</code> components dropping updates when
interrupted by a higher priority update (<a class="user-mention
notranslate" data-hovercard-type="user"
data-hovercard-url="/users/acdlite/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/acdlite">@ acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/18091"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18091/hovercard">#18091</a>)</li>
<li>Don't warn when suspending at the wrong priority (<a
href="https://redirect.github.com/gaearon">@ gaearon</a> in <a
href="https://redirect.github.com/facebook/react/pull/17971"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17971/hovercard">#17971</a>)</li>
<li>Fix a bug with rebasing updates (<a
href="https://redirect.github.com/acdlite">@ acdlite</a> and <a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17560"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17560/hovercard">#17560</a>, <a
href="https://redirect.github.com/facebook/react/pull/17510"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17510/hovercard">#17510</a>, <a
href="https://redirect.github.com/facebook/react/pull/17483"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17483/hovercard">#17483</a>, <a
href="https://redirect.github.com/facebook/react/pull/17480"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17480/hovercard">#17480</a>)</li>
</ul>
<h2>Artifacts</h2>
<ul>
<li>react: <a href="https://unpkg.com/react@16.13.0/umd/"
rel="nofollow">https://unpkg.com/react@16.13.0/umd/</a></li>
<li>react-art: <a href="https://unpkg.com/react-art@16.13.0/umd/"
rel="nofollow">https://unpkg.com/react-art@16.13.0/umd/</a></li>
<li>react-dom: <a href="https://unpkg.com/react-dom@16.13.0/umd/"
rel="nofollow">https://unpkg.com/react-dom@16.13.0/umd/</a></li>
<li>react-is: <a href="https://unpkg.com/react-is@16.13.0/umd/"
rel="nofollow">https://unpkg.com/react-is@16.13.0/umd/</a></li>
<li>react-test-renderer: <a
href="https://unpkg.com/react-test-renderer@16.13.0/umd/"
rel="nofollow">https://unpkg.com/react-test-renderer@16.13.0/umd/</a></li>
<li>scheduler: <a href="https://unpkg.com/scheduler@0.19.0/umd/"
rel="nofollow">https://unpkg.com/scheduler@0.19.0/umd/</a></li>
</ul>
      </li>
      <li>
<b>16.12.0</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.12.0">2019-11-14</a></br><h3>React
DOM</h3>
<ul>
<li>Fix passive effects (<code>useEffect</code>) not being fired in a
multi-root app. (<a href="https://redirect.github.com/acdlite">@
acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/17347"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17347/hovercard">#17347</a>)</li>
</ul>
<h3>React Is</h3>
<ul>
<li>Fix <code>lazy</code> and <code>memo</code> types considered
elements instead of components (<a
href="https://redirect.github.com/bvaughn">@ bvaughn</a> in <a
href="https://redirect.github.com/facebook/react/pull/17278"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17278/hovercard">#17278</a>)</li>
</ul>
<h2>Artifacts</h2>
<p>• react: <a href="https://unpkg.com/react@16.12.0/umd/"
rel="nofollow">https://unpkg.com/react@16.12.0/umd/</a><br>
• react-art: <a href="https://unpkg.com/react-art@16.12.0/umd/"
rel="nofollow">https://unpkg.com/react-art@16.12.0/umd/</a><br>
• react-dom: <a href="https://unpkg.com/react-dom@16.12.0/umd/"
rel="nofollow">https://unpkg.com/react-dom@16.12.0/umd/</a><br>
• react-is: <a href="https://unpkg.com/react-is@16.12.0/umd/"
rel="nofollow">https://unpkg.com/react-is@16.12.0/umd/</a><br>
• react-test-renderer: <a
href="https://unpkg.com/react-test-renderer@16.12.0/umd/"
rel="nofollow">https://unpkg.com/react-test-renderer@16.12.0/umd/</a><br>
• scheduler: <a href="https://unpkg.com/scheduler@0.18.0/umd/"
rel="nofollow">https://unpkg.com/scheduler@0.18.0/umd/</a></p>
      </li>
      <li>
        <b>16.11.0</b> - 2019-10-22
      </li>
      <li>
        <b>16.10.2</b> - 2019-10-03
      </li>
      <li>
        <b>16.10.1</b> - 2019-09-28
      </li>
      <li>
        <b>16.10.0</b> - 2019-09-27
      </li>
      <li>
        <b>16.9.0</b> - 2019-08-08
      </li>
      <li>
        <b>16.9.0-rc.0</b> - 2019-08-05
      </li>
      <li>
        <b>16.9.0-alpha.0</b> - 2019-04-03
      </li>
      <li>
        <b>16.8.6</b> - 2019-03-28
      </li>
      <li>
        <b>16.8.5</b> - 2019-03-22
      </li>
      <li>
        <b>16.8.4</b> - 2019-03-05
      </li>
    </ul>
from <a
href="https://redirect.github.com/facebook/react/releases">react-dom
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI4NTdmYmVkYy1hZTE3LTQ3ZGYtODhkYy03MTcyMWYxNThjZTkiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6Ijg1N2ZiZWRjLWFlMTctNDdkZi04OGRjLTcxNzIxZjE1OGNlOSJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?pkg&#x3D;react-dom&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react-dom","from":"16.8.4","to":"16.14.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"857fbedc-ae17-47df-88dc-71721f158ce9","prPublicId":"857fbedc-ae17-47df-88dc-71721f158ce9","packageManager":"npm","priorityScoreList":[],"projectPublicId":"12a8a5f5-3e19-438c-8280-eb8f4ee06d17","projectUrl":"https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":13,"publishedDate":"2020-10-14T19:38:26.085Z"},"vulns":[]}'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.